首頁 > web前端 > Bootstrap教程 > bootstrap怎麼讓圖片自適應螢幕

bootstrap怎麼讓圖片自適應螢幕

藏色散人
發布: 2019-07-20 11:33:07
原創
5596 人瀏覽過

bootstrap怎麼讓圖片自適應螢幕

bootstrap怎麼讓圖片自適應畫面

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

<img src="..." class="img-responsive center-block" >
登入後複製

如果是在內容頁裡面的話,直接用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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板