[英]Images not responsive by default in Twitter Bootstrap 3?
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. 看起来像新版本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? 它是否正确?
Bootstrap 4 Bootstrap 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%). Bootstrap 3有一个响应图像的特殊类(设置max-width为100%)。 This class is defined as:
该类定义为:
.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: less:在mixins.less中添加以下代码:
img {
&:extend(.img-responsive);
}
Note: requires Less 1.4.0. 注意:需要更少1.4.0。 see: https://stackoverflow.com/a/15573240/1596547
请参阅: https : //stackoverflow.com/a/15573240/1596547
img tags inside a carousel are responsive by default 默认情况下, 旋转木马内的img标签是响应式的
See also the answer of
@its-me (
https://stackoverflow.com/a/18653778/1596547 ).
另请参阅
@ 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
段落(
<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 .
另见: https : //developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level 。 So in HTML5 ap tag can contain any phrasing element intermixed with normal character data.
因此在HTML5中,ap标签可以包含与普通字符数据混合的任何短语元素。 (see: http://www.w3.org/TR/html-markup/p.html ) The
img
tag is such a phrasing element. (参见: http : //www.w3.org/TR/html-markup/p.html )
img
标签就是这样一个措辞元素。 The img
tag's default value for the display property is indeed inline-block
. img
标签的display属性的默认值确实是inline-block
。 Changing the display property to block does not violate any of the preceding rules. 将display属性更改为block不会违反任何前述规则。
Block level elements ( display:block
) take all the available space of their parent, which seems exactly what you expect for responsive images. 块级元素(
display:block
)占用其父级的所有可用空间,这看起来正是您对响应式图像的期望。 So setting display: block;
所以设置
display: block;
seems a reasonable choice, which has to be preferred above the inline-block
declaration. 似乎是一个合理的选择,必须优先于
inline-block
声明。
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. 根据@ its-me ( https://stackoverflow.com/a/18653778/1596547 )的建议,需要
inline-block
p元素inline-block
图像应该可能根本没有响应。
Excellent suggestion by @BassJobsen, but I'd use display: inline-block;
@BassJobsen的优秀建议,但我使用
display: inline-block;
instead of display: block;
而不是
display: block;
as that feels more semantic 1 (which means you can be a bit more sure you are not messing up somewhere else). 因为这感觉更加语义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; [1] :首先,如果是用例,图像几乎总是包含在块级元素中; and then again, we also use images in elements like paragraphs (
p
), where an inline-block
would be more appropriate than a block
element. 然后,我们还在段落(
p
)等元素中使用图像,其中inline-block
比block
元素更合适。
Got here after trying to figure out if it's safe to apply img-responsive
for 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 p
element. @its_me的答案让我认为将这个应用于
p
元素下的图像是不安全的。
This does not seems to be what the bootstrap team think. 这似乎不是引导团队的想法。
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.