我需要嵌套的flex容器中的图像宽度为100%,但是当容器有flex-direction: column
时,这在IE11中不起作用。我试过了:
img {
width: 100%;
max-width: calc( 100% - 0.1px );
}
但这也行不通。有什么想法吗?
section, .articles-wrapper, .article-wrapper {
display: flex;
}
.article-wrapper {
flex-direction: column;
}
img {
width: 100%;
}
HTML:
<section>
<div class="articles-wrapper">
<div class="article-wrapper">
<img src="http://via.placeholder.com/600x150">
</div>
</div>
</section>
答案 0 :(得分:0)
您是否检查过该页面以了解元素的布局?
实际上 的图片占据了父母宽度的100%,因为默认情况下,不允许将flex-items增加到填充Flex容器,但只展开足以显示其内容。
需要明确允许.articles-wrapper
和.article-wrapper
元素增长,方法是指定flex-grow: 1;
或使用速记属性flex
使用以下几个值之一:< / p>
.articles-wrapper, .article-wrapper {
flex: auto; /* shorthand for flex: 1 1 auto; */
}
OR
.articles-wrapper, .article-wrapper {
flex: 1; /* shorthand for flex: 1 1 0%; */
}
随着您更深入地使用flexbox,我建议保留Philip Walton的Flexbugs手册,其中列出了所有浏览器的常见错误以及每种浏览器的解决方法。
EDIT Michiel:flex: 1
适用于IE11,不同之处在于当窗口缩放到比图像大小更小的尺寸时,不保持纵横比。这个功能&#39;记录在Flexbugs #5中,可以通过添加非flex包装器来解决:
<section>
<div class="articles-wrapper">
<div class="article-wrapper">
<div> <!-- ADDED NON-FLEX WRAPPER -->
<img src="http://via.placeholder.com/600x150">
</div>
</div>
</div>
</section>