之前在做圖片自適應的時候想到的辦法是把圖片作為背景然後新增background-size:100%;讓圖片填滿整個盒子的方式來實現，但這樣圖片會根據盒子的大小拉伸，導致顯示變形，bootstrap中有很好的解決方法：

響應式影象

<imgsrc="..."class="img-responsive"alt="響應式影象">

通過新增 img-responsive class 可以讓 Bootstrap 3 中的影象對響應式佈局的支援更友好。

接下來讓我們看下這個 class 包含了哪些 css 屬性。

在下面的程式碼中，可以看到img-responsive class 為影象賦予了 max-width: 100%; 和 height: auto; 屬性，可以讓影象按比例縮放，不超過其父元素的尺寸。

.img-responsive {
  display:inline-block;
  height:auto;
  max-width:100%;}

這表明相關的影象呈現為 inline-block。當您把元素的 display 屬性設定為 inline-block，元素相對於它周圍的內容以內聯形式呈現，但與內聯不同的是，這種情況下我們可以設定寬度和高度。

設定 height:auto，相關元素的高度取決於瀏覽器。

設定 max-width 為 100% 會重寫任何通過 width 屬性指定的寬度。這讓圖片對響應式佈局的支援更友好。