引导程序 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%;
   }

少：在你的 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显示属性的标签默认值确实是inline-block。将 display 属性更改为 block 不会违反任何前述规则。

块级元素 ( display:block) 占用其父级的所有可用空间，这似乎正是您对响应式图像的期望。所以设置display: block;似乎是一个合理的选择，必须优先于inline-block声明。

需要@its-me ( https://stackoverflow.com/a/18653778/1596547 )inline-block建议的p 元素内的图像可能根本没有响应。

@BassJobsen 的好建议，但我会使用display: inline-block;而不是display: block;因为感觉更语义¹（这意味着您可以更加确定您不会在其他地方搞砸）。

所以，我的看起来像这样：

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

如果我的理解有缺陷，请告诉我。:)

[1]：一方面，如果这是用例，图像几乎总是包装在块级元素中；然后，我们还在段落 (p)等元素中使用图像，其中 aninline-block比block元素更合适。

在试图弄清楚申请img-responsive所有图像是否安全后来到这里。

@its_me 的回答让我认为将其应用于p元素下的图像是不安全的。

这似乎不是引导团队的想法。

这就是默认情况下 bootstrap3 中图像不响应的原因：

总结是它打破了大量毫无戒心的第三方小部件（包括谷歌地图），可以理解的是，这些小部件不会预期其中的图像被强制调整为其他宽度。这就是为什么我们在 Bootstrap v3 中回滚 Bootstrap v2 的“默认图像是响应式的”方法，转而支持显式的 .img 响应类。

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