Bootstrap 圖片

摘要： Bootstrap框架對圖片樣式的支持。

<img>類

Bootstrap 提供了對圖片應用簡單樣式的 class。

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

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

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

代碼示例：

<img src="E://web/image/flower.jpg" class="img-rounded"> 
<img src="E://web/image/flower.jpg" class="img-circle">
<img src="E://web/image/flower.jpg" class="img-thumbnail">

 

響應式圖片

經過在 <img> 標籤添加 .img-responsive 類來讓圖片支持響應式設計。 圖片將很好地擴展到父元素。

.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應用在圖片上

用法：

<img src="E://web/image/flower.jpg" class="img-responsive" alt="flower">