在 Bootstrap 版本 3 中,通過為圖片添加 .img-responsive
類可以讓圖片支持響應(yīng)式布局。其實質(zhì)是為圖片設(shè)置了 max-width:
100%;
、 height: auto;
和 display:
block;
屬性,從而讓圖片在其父元素中更好的縮放。
如果需要讓使用了 .img-responsive
類的圖片水平居中,請使用 .center-block
類,不要用 .text-center
。 請參考助手類章節(jié) 了解更多關(guān)于 .center-block
的用法。
在 Internet Explorer 8-10 中,設(shè)置為 .img-responsive
的 SVG 圖像顯示出的尺寸不勻稱。為了解決這個問題,在出問題的地方添加 width: 100% \9;
即可。Bootstrap 并沒有自動為所有圖像元素設(shè)置這一屬性,因為這會導(dǎo)致其他圖像格式出現(xiàn)錯亂。
<img src="..." class="img-responsive" alt="Responsive image">
通過為 <img>
元素添加以下相應(yīng)的類,可以讓圖片呈現(xiàn)不同的形狀。
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">