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);
}

传送带

标签内的carousel内的img标签默认为

语义规则

另请参阅@its-me（https://stackoverflow.com/a/18653778/1596547）的答案。使用上述功能可以使您的所有图像默认响应，将图像转换为block level elements。段落（<p>）中不允许使用块级元素，请参阅：https://stackoverflow.com/a/4291515/1596547

据我所知，块级别与内联元素的区别被更复杂的内容类别集取代。另见：https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level。因此在HTML5中，p标签可以包含与普通字符数据混合的任何短语元素。（请参阅：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）建议的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响应类。