bootstrap響應(yīng)式圖片如何使用

小編給大家分享一下bootstrap響應(yīng)式圖片如何使用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

響應(yīng)式圖片在項(xiàng)目應(yīng)用中的兩種常見(jiàn)形式：

分別是：屏幕尺寸改變，圖片布局隨之改變。為適應(yīng)pc端和移動(dòng)端設(shè)備轉(zhuǎn)換，使用兩套圖片資源。

一：屏幕尺寸改變，圖片布局隨之改變

<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.手機(jī)（<768px）

二：為適應(yīng)pc端和移動(dòng)端設(shè)備轉(zhuǎn)換，使用兩套圖片資源

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

兩套圖片資源，有利于防止頁(yè)面卡頓和節(jié)省流量。

以上是“bootstrap響應(yīng)式圖片如何使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！