bootstrap注意事項（七）圖片

時間 2019-12-18

原文原文鏈接

在本章中，咱們將學習 Bootstrap 對圖片的支持。Bootstrap 提供了三個可對圖片應用簡單樣式的 class：css

.img-rounded：添加 border-radius:6px 來得到圖片圓角。html

.img-circle：添加 border-radius:500px 來讓整個圖片變成圓形。bootstrap

.img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。瀏覽器

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<img src="/course/554b2aa0d7e0396d67b0a556/download02.png"class="img-rounded">
<img src="/course/554b2aa0d7e0396d67b0a556/download02.png"class="img-circle">
<img src="/course/554b2aa0d7e0396d67b0a556/download02.png"class="img-thumbnail">
</body>
</html>佈局

響應式圖片

在 Bootstrap 版本 3 中，經過爲圖片添加 .img-responsive 類能夠讓圖片支持響應式佈局。其實質是爲圖片設置了 max-width: 100%;、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。學習

若是須要讓使用了 .img-responsive 類的圖片水平居中，請使用.center-block 類，不要用 .text-center。spa

SVG 圖像和 IE 8-10

在 Internet Explorer 8-10 中，設置爲 .img-responsive 的 SVG 圖像顯示出的尺寸不勻稱。爲了解決這個問題，在出問題的地方添加width: 100% \9; 便可。Bootstrap 並無自動爲全部圖像元素設置這一屬性，由於這會致使其餘圖像格式出現錯亂。htm

圖片形狀

經過爲 <img> 元素添加如下相應的類，能夠讓圖片呈現不一樣的形狀。blog

跨瀏覽器兼容性

請時刻牢記：Internet Explorer 8 不支持 CSS3 中的圓角屬性。圖片

類	描述
.img-rounded	爲圖片添加圓角 (IE8 不支持)
.img-circle	將圖片變爲圓形 (IE8 不支持)
.img-thumbnail	縮略圖功能
.img-responsive	圖片響應式 (將很好地擴展到父元素)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。