Bootstrap圖像 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　圖像在網頁制作中也是常要用到的元素，本文將詳細介紹Bootstrap圖像

響應式圖片

　　通過為圖片添加 .img-responsive 類可以讓圖片支持響應式布局。其實質是為圖片設置了 max-width: 100%;、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放

img {
    vertical-align: middle;
}
.img-responsive,.thumbnail>img,.thumbnail a >img,.carousel-inner > .item >img,.carousel-inner > .item > a >img {
    display: block;
    max-width: 100%;
    height: auto;
}

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

　　在IE8-10瀏覽器中，設置為 .img-responsive 的 SVG 圖像顯示出的尺寸不勻稱。為了解決這個問題，在出問題的地方添加 width: 100% \9; 即可。Bootstrap 并沒有自動為所有圖像元素設置這一屬性，因為這會導致其他圖像格式出現錯亂

<div>
    <img src="http://via.placeholder.com/350x150" class="img-responsive" alt="Responsive image">
</div>

圖片形狀

　　通過為 <img> 元素添加以下相應的類，可以讓圖片呈現不同的形狀

　　1、img-rounded：圓角圖片

　　2、img-circle：圓形圖片

　　3、img-thumbnail：縮略圖片

　　對于圓角圖片和圓形圖片效果，因為是使用了CSS3的圓角樣式border-radius來實現的，所以注意對于IE8以及其以下版本不支持，是沒有圓角效果的。

.img-rounded {
    border-radius: 6px;
}
.img-thumbnail {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.img-circle {
    border-radius: 50%;
}

<div>
    <img src="http://via.placeholder.com/140x140" alt="rounded" class="img-rounded">
    <img src="http://via.placeholder.com/140x140" alt="circle" class="img-circle">
    <img src="http://via.placeholder.com/140x140" alt="thumbnail" class="img-thumbnail">    
</div>