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

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

相關教學推薦：《》

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

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

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

<div class="container-fluid">
       <div class="row">
           <div class="col-md-3 col-sm-6 col-xs-12">
               <img src="img/box-logo.png" alt="" class="img-responsive center-block">
           </div>
           <div class="col-md-3 col-sm-6 col-xs-12">
            <img src="img/google-logo.png" alt="" class="img-responsive center-block">
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <img src="img/intuit-logo.png" alt="" class="img-responsive center-block">
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <img src="img/square-logo.png" alt="" class="img-responsive center-block">
            </div>
        </div>
   </div>

效果:

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

2.平板（>768px <996px）

3.手機（<768px）

二：為適應pc端和行動端裝置轉換，使用兩套圖片資源

<div class="container">
       <img src="1.jpg" alt="" class="visible-xs img-responsive">
       <img src="2.jpg" alt="" class="hidden-xs img-responsive">
   </div>

兩套圖片資源，有利於防止頁面卡頓和節省流量。

更多程式設計相關知識，請存取：！！

以上就是淺談bootstrap響應式圖片的實現方法的詳細內容，更多請關注TW511.COM其它相關文章！