圖片在Twitter Bootstrap 3中默認無響應？

Question

看起來像新版本3.0我必須將圖像的類名設置為col-lg-4 col-sm-4 col-4如果圖像是具有相同類名的div的一部分，以使圖像響應於所有斷點。

在版本2中，圖像CSS屬性默認繼承父級的div屬性。

它是否正確？

Answer 1

Bootstrap 4

對於Bootstrap 4，使用Sass（SCSS）：

// make images responisve by default
img {
  @extend .img-fluid;    
}

回答第3版的更新

Bootstrap 3有一個響應圖像的特殊類（設置max-width為100％）。 該類定義為：

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

注意默認情況下獲取img標記：

img {
     vertical-align: middle;
     border: 0;
     page-break-inside: avoid;
     max-width: 100% !important;
     }

因此，使用class="img-responsive"可以使您的圖像響應。

要使所有圖像默認響應：

css：在bootstrap css下添加以下代碼：

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

less：在mixins.less中添加以下代碼：

img {
  &:extend(.img-responsive);
}

注意：需要更少1.4.0。 請參閱： https ： //stackoverflow.com/a/15573240/1596547

圓盤傳送帶

默認情況下， 旋轉木馬內的img標簽是響應式的

語義規則

另請參閱 @ its-me的答案（ https://stackoverflow.com/a/18653778/1596547 ）。 使用上述功能可以使您的所有圖像默認響應，將圖像轉換為 塊級元素 。 段落（ <p> ）中不允許使用塊級元素，請參閱： https ： //stackoverflow.com/a/4291515/1596547

據我所知，塊級與內聯元素的區別被一組更復雜的內容類別所取代。 另見： https ： //developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level 。 因此在HTML5中，ap標簽可以包含與普通字符數據混合的任何短語元素。 （參見： http ： //www.w3.org/TR/html-markup/p.html ） img標簽就是這樣一個措辭元素。 img標簽的display屬性的默認值確實是inline-block 。 將display屬性更改為block不會違反任何前述規則。

塊級元素（ display:block ）占用其父級的所有可用空間，這看起來正是您對響應式圖像的期望。 所以設置display: block; 似乎是一個合理的選擇，必須優先於inline-block聲明。

根據@ its-me （ https://stackoverflow.com/a/18653778/1596547 ）的建議，需要inline-block p元素inline-block圖像應該可能根本沒有響應。

Answer 2

@BassJobsen的優秀建議，但我使用display: inline-block; 而不是display: block; 因為這感覺更加語義¹ （這意味着你可以更確定你不會搞砸其他地方）。

所以，我的看起來像這樣：

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

如果我的理解有缺陷，請告訴我。 :)

---

[1] ：首先，如果是用例，圖像幾乎總是包含在塊級元素中; 然后，我們還在段落（ p ）等元素中使用圖像，其中inline-block比block元素更合適。

Answer 3

在試圖找出對所有圖像應用img-responsive是否安全之后到了這里。

@its_me的答案讓我認為將這個應用於p元素下的圖像是不安全的。

這似乎不是引導團隊的想法。

這就是為什么在bootstrap3中默認情況下圖像沒有響應的原因：

摘要是它打破了大量毫無防備的第三方小部件（包括谷歌地圖），可以理解的是，它們並未預期其中的圖像被強制調整為其他寬度。 這就是為什么我們在Bootstrap v3中回滾Bootstrap v2的“圖像是默認響應”方法，而采用明確的.img響應類。

https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107