twitter-bootstrap 默认情况下，Twitter Bootstrap 3 中的图像没有响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17932509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Images not responsive by default in Twitter Bootstrap 3?
提问by Laurent-514
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-4if the image is part of div with the same class names to make the image responsive with all breakpoints.
看起来在新版本 3.0 中，col-lg-4 col-sm-4 col-4如果图像是具有相同类名的 div 的一部分，我必须将图像的类名设置为使图像响应所有断点。
In version 2 the images CSS properties inherited by default the parent's div properties.
在版本 2 中，图像 CSS 属性默认继承父级的 div 属性。
Is this correct?
这个对吗？
回答by Bass Jobsen
Bootstrap 4
引导程序 4
For Bootstrap 4 use Sass (SCSS):
对于 Bootstrap 4，使用 Sass (SCSS)：
// make images responisve by default
img {
@extend .img-fluid;
}
answer updated for version 3
版本 3 的答案更新
Bootstrap 3 has a special class for responsive images (set max-width to 100%). This class is defined as:
Bootstrap 3 为响应式图像提供了一个特殊的类（将 max-width 设置为 100%）。这个类定义为：
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Note img tag gets by default:
注意 img 标签默认获取：
img {
vertical-align: middle;
border: 0;
page-break-inside: avoid;
max-width: 100% !important;
}
So use class="img-responsive"to make your images responsive.
因此，请使用class="img-responsive"使您的图像具有响应性。
To make all images responsive by default:
默认情况下使所有图像具有响应性：
css:add the code below under the bootstrap css:
css：在bootstrap css下添加如下代码：
img {
display: block;
height: auto;
max-width: 100%;
}
less:add the code below in your mixins.less:
少：在你的 mixins.less 中添加以下代码：
img {
&:extend(.img-responsive);
}
Note: requires Less 1.4.0. see: https://stackoverflow.com/a/15573240/1596547
注意：需要小于 1.4.0。见：https: //stackoverflow.com/a/15573240/1596547
Carousel
旋转木马
img tags inside a carouselare responsive by default
轮播中的img 标签默认是响应式的
Semantic rules
语义规则
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
另请参阅@its-me的答案（https://stackoverflow.com/a/18653778/1596547）。默认情况下，使用上述方法使您的所有图像具有响应性，将您的图像转换为块级元素。段落 ( <p>) 中不允许使用块级元素，请参阅：https: //stackoverflow.com/a/4291515/1596547
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 imgtag is such a phrasing element. The imgtag'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.
据我了解，块级元素与内联元素的区别被更复杂的内容类别集所取代。另见：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 不会违反任何前述规则。
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-blockdeclaration.
块级元素 ( display:block) 占用其父级的所有可用空间，这似乎正是您对响应式图像的期望。所以设置display: block;似乎是一个合理的选择，必须优先于inline-block声明。
Images inside p elements which require inline-blockas suggest by @its-me(https://stackoverflow.com/a/18653778/1596547) should maybe not be responsive at all.
需要@its-me( https://stackoverflow.com/a/18653778/1596547)inline-block建议的p 元素内的图像可能根本没有响应。
回答by its_me
Excellent suggestion by @BassJobsen, but I'd use display: inline-block;instead of display: block;as that feels more semantic 1(which means you can be a bit more sure you are not messing up somewhere else).
@BassJobsen 的好建议，但我会使用display: inline-block;而不是display: block;因为感觉更语义1（这意味着您可以更加确定您不会在其他地方搞砸）。
So, mine would look like this:
所以，我的看起来像这样：
img {
display: inline-block;
height: auto;
max-width: 100%;
}
Please do let me know if my understanding is flawed. :)
如果我的理解有缺陷，请告诉我。:)
[1]: For one, images are almost always wrapped in a block-level element if that's the use case; and then again, we also use images in elements like paragraphs (p), where an inline-blockwould be more appropriate than a blockelement.
[1]：一方面，如果这是用例，图像几乎总是包装在块级元素中；然后，我们还在段落 (p)等元素中使用图像，其中 aninline-block比block元素更合适。
回答by tepez
Got here after trying to figure out if it's safe to apply img-responsivefor all images.
在试图弄清楚申请img-responsive所有图像是否安全后来到这里。
The answer by @its_me led me to think that it isn't safe to apply this for images under a pelement.
@its_me 的回答让我认为将其应用于p元素下的图像是不安全的。
This does not seems to be what the bootstrap team think.
这似乎不是 bootstrap 团队的想法。
This is why images are not responsive by default in bootstrap3:
这就是默认情况下 bootstrap3 中图像不响应的原因：
The summary is that it breaks a ton of unsuspecting third-party widgets (including Google Maps), which understandably don't anticipate the images within them being forcibly resized to other widths. This is why we rolled back Bootstrap v2's "images are responsive by default" approach in Bootstrap v3 in favor of an explicit .img-responsive class.
总结是它打破了大量毫无戒心的第三方小部件（包括谷歌地图），可以理解的是，这些小部件不会预期其中的图像被强制调整为其他宽度。这就是为什么我们在 Bootstrap v3 中回滚 Bootstrap v2 的“默认图像是响应式的”方法，转而支持显式的 .img 响应类。
https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107
https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107
