bootstrap讓圖片自適應(yīng)屏幕的方法

發(fā)布時(shí)間：2020-09-21 12:11:50 來(lái)源：億速云閱讀：1091 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了bootstrap讓圖片自適應(yīng)屏幕的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

bootstrap怎么讓圖片自適應(yīng)屏幕

bootstrap響應(yīng)式圖片的正確的設(shè)置是在img上面加上兩個(gè)類(lèi)就可以了。

<img src="..." class="img-responsive center-block" >

如果是在內(nèi)容頁(yè)里面的話(huà)，直接用js給每個(gè)img加上屬性就可以了。

$(window).load(function(){
 
    $(".panel-body img").addClass("img-responsive center-block");
 
})

在 Bootstrap 版本 3 中，通過(guò)為圖片添加 .img-responsive 類(lèi)可以讓圖片支持響應(yīng)式布局。其實(shí)質(zhì)是為圖片設(shè)置了 max-width: 100%;、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。

如果需要讓使用了 .img-responsive 類(lèi)的圖片水平居中，請(qǐng)使用 .center-block 類(lèi)，不要用 .text-center。

SVG 圖像和 IE 8-10

在 Internet Explorer 8-10 中，設(shè)置為 .img-responsive 的 SVG 圖像顯示出的尺寸不勻稱(chēng)。為了解決這個(gè)問(wèn)題，在出問(wèn)題的地方添加 width: 100% \9; 即可。Bootstrap 并沒(méi)有自動(dòng)為所有圖像元素設(shè)置這一屬性，因?yàn)檫@會(huì)導(dǎo)致其他圖像格式出現(xiàn)錯(cuò)亂。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享bootstrap讓圖片自適應(yīng)屏幕的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

bootstrap讓圖片自適應(yīng)屏幕的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽