Bootstrap圖像形狀
圓角：
圈：
縮略圖：
圓角
該.img-rounded類添加圓角到圖像（IE8不支持圓角）：
圈
該.img-circle一流的形象塑造為一個圓（IE8不支持圓角）：
縮略圖
該.img-thumbnail級塑造形象，以縮略圖：
例
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> 試一試» 響應圖片
圖片來自於所有尺寸。 所以，做屏幕。 響應圖像自動調節以適應屏幕大小。
通過添加創建響應圖像.img-responsive類的<img>標籤。 然後圖像會很好地擴展到父元素。
該.img-responsive類應用display: block; 和max-width: 100%; 和height: auto; 到圖像：
圖片廊
你也可以用Bootstrap's網格系統會同.thumbnail類來創建一個圖片庫：
例
<div class="row">
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit
Rock" style="width:150px;height:150px">
</a>
</div>
<div
class="col-md-4">
<a href="moustiers-sainte-marie.jpg"
class="thumbnail">
<p>Moustiers-Sainte-Marie:
Considered as one of the "most beautiful villages of France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"
style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of
Italy.</p>
<img src="cinqueterre.jpg"
alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div> 試一試» 響應嵌入功能
也讓視頻或幻燈片的比例適當的任何設備上。
類可以直接應用到<iframe>, <embed>, <video>和<object>元素。
下面的例子通過添加創建一個響應視頻.embed-responsive-item類的<iframe>標記（則視頻將很好地擴展到父元素）。 包含<div>定義視頻的長寬比：
例
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> 試一試» 什麼是寬高比？
圖像的寬高比描述其寬度和高度之間的比例關係。 兩種常見的視頻寬高比為4：3（20世紀的通用的視頻格式），和16：9（萬能高清電視，再到歐洲數字電視）。
您可以在兩種寬高比類之間進行選擇：
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>自測練習用！
完整的Bootstrap圖像參考
對於所有的圖像類的完整參考，請訪問我們完整的Bootstrap圖像參考 。