Twitter Bootstrap 3 中的图片默认没有响应？

Posted 2023-02-22

【中文标题】Twitter Bootstrap 3 中的图片默认没有响应？

【英文标题】：Images not responsive by default in Twitter Bootstrap 3?

【发布时间】：2013-07-29 17:50:04

【问题描述】：

看起来在新版本 3.0 中，如果图像是具有相同类名的 div 的一部分，我必须将图像的类名设置为 col-lg-4 col-sm-4 col-4，以使图像对所有断点都做出响应。

在版本 2 中，图像 CSS 属性默认继承父级的 div 属性。

这对吗？

【问题讨论】：

好像有一个新的响应式图片类.img-responsive

【参考方案1】：

引导程序 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://***.com/a/15573240/1596547

轮播

carousel 中的 img 标签默认是响应式的

语义规则

另见@its-me (https://***.com/a/18653778/1596547) 的回答。默认情况下，使用上述方法使您的所有图像都具有响应性，会将您的图像转换为block level elements。段落中不允许使用块级元素 (<p>)，请参阅：https://***.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://***.com/a/18653778/1596547) 的建议需要inline-block 的p 元素内的图像可能根本不响应。

【讨论】：

萨斯：img @extend .img-responsive;

【参考方案2】：

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

所以，我的应该是这样的：

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

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

---

[1]：首先，如果是这样的用例，图像几乎总是包裹在块级元素中；再说一次，我们还在段落 (p) 等元素中使用图像，其中inline-block 比block 元素更合适。

【讨论】：

有趣的东西。如果您设置宽度（在这种情况下为最大宽度），则元素将始终 / 成为我理解的块级元素。因此，遵循语义规则，您不能在<p> 中使用最大高度的图像。设置显示内联块可能感觉更好，但不是。这应该是 Bootstrap 现在默认不让图像响应的原因。

@BassJobsen 这里有更多支持我的回答：***.com/a/2402773/1071413

@its-me 似乎在 HTML5 中，块级元素与内联元素的区别被一组更复杂的内容类别所取代。另见developer.mozilla.org/en-US/docs/Web/HTML/…

在最初使用公认的解决方案后，我遇到了一些不良结果。另外，我也得出了使用 inline-block 的相同结论，它解决了这些问题，而没有我所知道的任何负面影响。

【参考方案3】：

在尝试确定为所有图像应用img-responsive 是否安全后来到这里。

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

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

这就是为什么 bootstrap3 中的图片默认没有响应的原因：

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

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