javascript - Twitter Bootstrap 3 中的图片默认不响应？

Question

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

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

这是正确的吗？

Answer 1

Bootstrap 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:在bootstrap css下添加以下代码:

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

less:在您的 mixins.less 中添加以下代码:

img {
  &:extend(.img-responsive);
}

注意:需要 Less 1.4.0。参见:https://stackoverflow.com/a/15573240/1596547

轮播

carousel 内的 img 标签默认响应

语义规则

另见 @its-me的答案( https://stackoverflow.com/a/18653778/1596547)。默认情况下，使用上面的方法使所有图像响应，将图像变为 block level elements .段落中不允许使用 block 级元素( <p>)，请参阅: https://stackoverflow.com/a/4291515/1596547

据我所知， block 级元素与内联元素的区别被一组更复杂的内容类别所取代。另请参阅: 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标签显示属性的默认值确实是 inline-block .将显示属性更改为 block 不违反任何上述规则。

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

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