56

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

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

这个对吗？

4

3 回答 3

142

引导程序 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：在引导 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;似乎是一个合理的选择，它必须优先于inline-block声明。

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

于 2013-07-29T20:06:40.060 回答
13

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

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

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

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

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

于 2013-09-06T08:56:19.390 回答
0

在尝试确定申请img-responsive所有图像是否安全后到达这里。

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

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

这就是为什么 bootstrap3 默认情况下图像没有响应的原因：

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

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

于 2016-02-29T09:39:17.283 回答