图片在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