Bootstrap 圖片
Bootstrap 圖片形狀
圓角
圓形
縮圖
圓角
`.img-rounded` 類為圖片新增圓角（IE8 不支援圓角）
圓形
`.img-circle` 類將圖片塑造成圓形（IE8 不支援圓角）
縮圖
`.img-thumbnail` 類將圖片塑造成縮圖
響應式圖片
圖片有各種尺寸。螢幕也是。響應式圖片會自動調整以適應螢幕尺寸。
透過向 `<img>` 標籤新增 `.img-responsive` 類來建立響應式圖片。然後圖片將很好地縮放到父元素。
`.img-responsive` 類應用於圖片`display: block;` 和 `max-width: 100%;` 和 `height: auto;`
圖片庫
您還可以將 Bootstrap 的網格系統與 `.thumbnail` 類結合使用來建立圖片庫。
注意：您將在本教程的後面部分學習有關網格系統的更多知識（如何建立具有不同列數的佈局）。
示例
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/lights.jpg">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/nature.jpg">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/fjords.jpg">
<img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
</div>
自己動手試一試 »
響應式嵌入
也讓影片或幻燈片在任何裝置上都能正確縮放。
類可以直接應用於 `<iframe>`、`<embed>`、`<video>` 和 `<object>` 元素。
下面的示例透過向 `<iframe>` 標籤新增 `.embed-responsive-item` 類來建立一個響應式影片（影片將很好地縮放到父元素）。包含的 `<div>` 定義了影片的縱橫比
示例
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
自己動手試一試 »
什麼是寬高比？
圖片的縱橫比描述了其寬度和高度之間的比例關係。兩個常見的影片縱橫比是 4:3（20 世紀的通用影片格式）和 16:9（高畫質電視和歐洲數字電視的通用格式）。
您可以在兩個縱橫比類之間進行選擇
<!-- 16:9 縱橫比 -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 縱橫比 -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
自己動手試一試 »
完整的 Bootstrap 圖片參考
有關所有圖片類的完整參考，請訪問我們的完整 Bootstrap 圖片參考。
