淺談bootstrap響應式圖片的實作方法

本篇文章跟大家介紹一下bootstrap實作響應式圖片的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

相關教學推薦：《bootstrap教學》

響應式圖片在專案應用程式中的兩種常見形式：

分別是：螢幕尺寸改變，圖片佈局隨之改變。為適應pc端和行動端裝置轉換，使用兩套圖片資源。

一：螢幕尺寸改變，圖片佈局隨之改變

<div>
       <div>
           <div>
               <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/box-logo.png" alt="淺談bootstrap響應式圖片的實作方法" >
           </div>
           <div>
            <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/google-logo.png" alt="淺談bootstrap響應式圖片的實作方法" >
            </div>
            <div>
                <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/intuit-logo.png" alt="淺談bootstrap響應式圖片的實作方法" >
            </div>
            <div>
                <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/square-logo.png" alt="淺談bootstrap響應式圖片的實作方法" >
            </div>
        </div>
   </div>

效果:

1.大於桌面圖片（>996px）

##################################### # 2.平板（>768px

                   

###兩組圖片資源，有利於防止頁面卡頓和節省流量。 ######更多程式相關知識，請造訪：###程式設計教學###！ ！ ###

以上是淺談bootstrap響應式圖片的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！