默认情况下，Twitter Bootstrap 3 中的图像没有响应? [英] Images not responsive by default in Twitter Bootstrap 3?

问题描述

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

It looks like with the new version 3.0 I have to set the class names of an image to col-lg-4 col-sm-4 col-4 if the image is part of div with the same class names to make the image responsive with all breakpoints.

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

In version 2 the images CSS properties inherited by default the parent's div properties.

这是正确的吗?

推荐答案

Bootstrap 4

对于 Bootstrap 4，使用 Sass (SCSS):

For Bootstrap 4 use Sass (SCSS):

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

已更新版本 3 的答案

Bootstrap 3 为响应式图像提供了一个特殊的类(将 max-width 设置为 100%).该类定义为:

Bootstrap 3 has a special class for responsive images (set max-width to 100%). This class is defined as:

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

注意 img 标签默认获取:

Note img tag gets by default:

img {
     vertical-align: middle;
     border: 0;
     page-break-inside: avoid;
     max-width: 100% !important;
     }

因此使用 class="img-responsive" 使您的图像具有响应性.

So use class="img-responsive" to make your images responsive.

要使所有图像默认响应:

To make all images responsive by default:

css:在bootstrap css下添加如下代码:

css: add the code below under the bootstrap css:

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

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

less: add the code below in your mixins.less:

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

注意:需要小于 1.4.0.请参阅:https://stackoverflow.com/a/15573240/1596547

Note: requires Less 1.4.0. see: https://stackoverflow.com/a/15573240/1596547

carousel 中的

img 标签默认是响应式的

img tags inside a carousel are responsive by default

另见@its-me的回答(https://stackoverflow.com/a/18653778/1596547).默认情况下，使用上述方法使所有图像具有响应性会将图像变为 块级别元素.段落中不允许使用块级元素 (

)，请参阅:https://stackoverflow.com/a/4291515/1596547

See also the answer of @its-me (https://stackoverflow.com/a/18653778/1596547). Using the above to make all your images responsive by default turns your images to block level elements. Block level elements are not allowed in paragraphs (<p>), see: https://stackoverflow.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.将显示属性更改为阻止不会违反任何前述规则.

As far as i understand the distinction of block-level vs. inline elements is replaced with a more complex set of content categories. See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level. So in HTML5 a p tag can contain any phrasing element intermixed with normal character data. (see: http://www.w3.org/TR/html-markup/p.html) The img tag is such a phrasing element. The img tag's default value for the display property is indeed inline-block. Changing the display property to block does not violate any of the preceding rules.

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

Block level elements (display:block) take all the available space of their parent, which seems exactly what you expect for responsive images. So setting display: block; seems a reasonable choice, which has to be preferred above the inline-block declaration.

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

Images inside p elements which require inline-block as suggest by @its-me (https://stackoverflow.com/a/18653778/1596547) should maybe not be responsive at all.

这篇关于默认情况下，Twitter Bootstrap 3 中的图像没有响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！