Bootstrap全局樣式 - 圖片

知識(shí)點(diǎn)

類 | 描述

  • | :-: | -:
    .img-responsive | max-width: 100%; height: auto; 和 display: block;圖片響應(yīng)式
    .center-block | 圖片水平居中
    .img-rounded | 為圖片添加圓角 (IE8 不支持)，border-radius:6px
    .img-circle | 添加 border-radius:500px 來(lái)讓整個(gè)圖片變成圓形
    .img-thumbnail | 添加內(nèi)邊距（padding）和一個(gè)灰色的邊框。

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

實(shí)踐

    ![](images/img1.jpg)
    ![](images/img1.jpg)
    ![](images/img1.jpg)
    ![](images/img1.jpg)
    ![](images/img1.jpg)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容