bootstrap怎麼讓圖片自適應螢幕

bootstrap怎麼讓圖片自適應畫面

bootstrap響應式圖片的正確的設定是在img上面加上兩個類別就可以了。

<img  class="img-responsive center-block lazy"  src="/static/imghwm/default1.png"  data-src="..."     alt="bootstrap怎麼讓圖片自適應螢幕" >

如果是在內容頁裡面的話，直接用js給每個img加上屬性就可以了。

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

在 Bootstrap 版本 3 中，透過為圖片新增 .img-responsive 類別可以讓圖片支援響應式佈局。其實質是為圖片設定了 max-width: 100%;、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。

如果需要讓使用了 .img-responsive 類別的圖片水平居中，請使用 .center-block 類，不要用 .text-center。

 

SVG 映像和 IE 8-10

#在 Internet Explorer 8-10 中，設定為 .img-responsive 的 SVG 影像顯示的尺寸不勻稱。為了解決這個問題，在出問題的地方加上 width: 100% \9; 即可。 Bootstrap 並沒有自動為所有影像元素設定此屬性，因為這會導致其他影像格式出現錯亂。

相關推薦：《bootstrap教程》

以上是bootstrap怎麼讓圖片自適應螢幕的詳細內容。更多資訊請關注PHP中文網其他相關文章！