Twitter Bootstrap 3中的图像默认情况下没有响应

Images not responsive by default in Twitter Bootstrap 3?

本文关键字：情况下 响应 默认 图像 Bootstrap Twitter      更新时间：2023-09-26

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

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

这是正确的吗？

引导4

对于Bootstrap 4，请使用Sass（SCSS）：

// make images responisve by default
img {
  @extend .img-fluid;    
}

针对版本3更新了答案

Bootstrap 3有一个用于响应图像的特殊类（将最大宽度设置为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%;
   }

less：在您的mixin.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-水平。因此，在HTML5中，p标签可以包含任何与普通字符数据混合的短语元素。（请参见：http://www.w3.org/TR/html-markup/p.html)img标签就是这样一个措辞元素。display属性的img标记的默认值实际上是inline-block。将显示属性更改为块不会违反前面的任何规则。

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

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

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

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

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

如果我的理解有缺陷，请告诉我。：）

[1]：首先，如果是用例，图像几乎总是被包裹在块级元素中；然后，我们还使用像段落（p）这样的元素中的图像，其中inline-block比block元素更合适。

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

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

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

这就是为什么图像在引导程序3:中默认情况下没有响应的原因

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

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

相关文章：