[英]How to make an image fill a flex item with flex-grow?
I've read through all existing solutions in which images could fill the containing divs but I haven't found a solution for filling a div without a static dimension, such as divs that only have been laid out by flex-grow
. 我已经阅读了所有现有解决方案,其中图像可以填充包含的div,但是我还没有找到一种解决方案,该解决方案可以在没有静态尺寸的情况下填充div,例如仅由flex-grow
布局的div。
Currently the image will destroy the flex-grow
proportions I have set on the container. 目前,图片会破坏我在容器上设置的flex-grow
比例。 I want the img
to just fill the div and not stretch the div out. 我希望img
仅填充div,而不要拉伸div。
As much as possible I don't want to inline style. 我尽可能不要内联样式。
Is there an existing polyfill or solution to this? 是否有现有的填充料或解决方案?
.container { display: flex; min-height: 300px; width: 500px; flex: 1; } .sub-container { flex: 1; display: flex; flex-direction: row; } .sub-container > div { flex-grow: 1; } .first-container { background-color: blue; } .second-container { background-color: yellow; } .second-container>img { max-height: 100%; max-width: 100%; object-fit: scale-down; }
<div class="container"> <div class="sub-container"> <div class="first-container"> A </div> <div class="second-container"> <img src="https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg" /> </div> </div> </div>
http://jsfiddle.net/jojonarte/tu3nbw4q/ http://jsfiddle.net/jojonarte/tu3nbw4q/
You have this in your code: 您的代码中包含以下内容:
.sub-container > div {
flex-grow: 1;
}
Okay, that defines flex-grow
. 好的,这定义了flex-grow
。
But you haven't defined flex-basis
. 但是您尚未定义flex-basis
。 As a result, flex-basis
keeps its default value, which is: auto
(ie, content-defined) . 结果, flex-basis
保持其默认值,即: auto
(即,内容定义的) 。
That's what you're seeing your layout: A flex item that is being sized by the content. 这就是您所看到的布局:一个根据内容确定大小的弹性项目。
In other words, because the natural dimensions of the image are so large (in comparison to the size of the container), the image is taking up all free space and flex-grow
is having no effect (it has no free space to distribute). 换句话说,由于图像的自然尺寸非常大(与容器的大小相比),因此图像占用了所有可用空间,而flex-grow
没有效果(没有可用空间来分配) 。
As a solution, add this to the rule: 作为解决方案,将其添加到规则中:
.sub-container > div {
flex-grow: 1;
flex-basis: 0; /* new */
}
or, more efficiently: 或者,更有效地:
.sub-container > div {
flex: 1; /* fg:1, fs:1, fb:0 */
}
.container { display: flex; min-height: 300px; width: 500px; } .sub-container { flex: 1; display: flex; flex-direction: row; } /* ADJUSTMENT HERE */ .sub-container > div { flex: 1; } .first-container { background-color: blue; } .second-container { background-color: yellow; } .second-container>img { max-height: 100%; max-width: 100%; object-fit: scale-down; }
<div class="container"> <div class="sub-container"> <div class="first-container">A</div> <div class="second-container"> <img src="https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg" /> </div> </div> </div>
More information: 更多信息:
To avoid the problem described in the question, as a general rule, use the flex
property instead of flex-grow
, flex-shrink
and flex-basis
individually. 为了避免出现问题中描述的问题,通常,请分别使用flex
属性而不是flex-grow
, flex-shrink
和flex-basis
。
From the flexbox specification: 根据flexbox规范:
§ 7.2.1. 第7.2.1节。 Components of Flexibility 灵活性的组成部分
Authors are encouraged to control flexibility using the
flex
shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses . 鼓励作者使用flex
速记而不是直接使用其速记属性来控制灵活性,因为速记会正确地重置任何未指定的组件以适应常见用途 。
Learn more about the difference between flex-basis: auto
and flex-basis: 0
了解有关flex-basis: auto
和flex-basis: 0
之间的区别的更多信息
Use background-image
instead use img
tag and use background-size: 100% 100%;
使用background-image
而不是img
标签,并使用background-size: 100% 100%;
: :
.container { display: flex; min-height: 300px; width: 500px; flex: 1; } .sub-container { flex: 1; display: flex; flex-direction: row; } .sub-container>div { flex-grow: 1; } .first-container { background-color: blue; } .second-container { background: url(https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg); background-repeat: no-repeat; background-size: 100% 100%; }
<div class="container"> <div class="sub-container"> <div class="first-container"> A </div> <div class="second-container"> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.