在flexbox中的图像高度在Chrome中不起作用 [英] Image height inside flexbox not working in Chrome
问题描述
我有一个 div
,使用 flexbox 来放置其项目。在这个 div
里面我有3个元素,其中一个是图片。
< div id =flex-container>
< div id =container1>< / div>
< img src =#alt =>
< div id =container2>< / div>
< / div>
#container1
和#container2
有自己的高度,而 img
应该使用中的剩余高度#flex-container
$ b
适用于Firefox ,但不适用于Chrome 。 ( jsfiddle )
#flex-container {height:300px;宽度:500px;显示:flex;显示:-webkit-flex; flex-flow:立柱; -webkit-flex-flow:列nowrap; justify-content:center; -webkit-justify-content:center; align-items:center; -webkit-align-items:center; border:5px solid black;}#container1,#container2 {height:100px;宽度:300px;背景:橙色; flex:1 0 auto; -webkit-flex:1 0 auto;}
< div id =flex-container> < div id =container1> 300x100 px< / div> < img src =http://i.imgur.com/RRUe0Mo.pngalt => < div id =container2> 300x100 px< / div>< / div>
Chrome需要 -webkit -
作为flexbox的前缀,但问题似乎并不是这样。
会发生什么?是一个浏览器的错误,或者我忘记了一些东西?
有两个问题需要克服:
Firefox自己解决了这个问题,但Chrome需要帮助。
$ b
问题1
第一个问题是,默认情况下,弹性项目不能小于其内容。 Flex项目的初始设置是 min-height:auto
。
min-height:0
),否则无法将项目设置得更小。
#flex-container {height:300px;宽度:500px;显示:flex; flex-flow:立柱; justify-content:center; align-items:center; border:5px solid black;}#container1,#container2 {height:100px;宽度:300px;背景:橙色; flex:1 0 auto;} img {min-height:0; } / * NEW * /
< div id =柔性容器> < div id =container1> 300x100 px< / div> < img src =http://i.imgur.com/RRUe0Mo.pngalt => < div id =container2> 300x100 px< / div>< / div>
这个问题的完整解释可以在这里找到:
问题2
然后你遇到了第二个问题:保持宽高比。这是flex容器中的一个常见问题。一个选项是为图像定义一个高度:
#flex-container {height:300px;宽度:500px;显示:flex; flex-flow:立柱; justify-content:center; align-items:center; border:5px solid black;}#container1,#container2 {height:100px;宽度:300px;背景:橙色; flex:1 0 auto;} img {min-height:0; height:100px; } / * NEW * /
< div id =柔性容器> < div id =container1> 300x100 px< / div> < img src =http://i.imgur.com/RRUe0Mo.pngalt => < div id =container2> 300x100 px< / div>< / div>
b
I have a div
using flexbox to center its items. Inside this div
I have 3 elements, one of them is an image.
<div id="flex-container">
<div id="container1"></div>
<img src="#" alt="">
<div id="container2"></div>
</div>
#container1
and #container2
have their own height, and the img
should use the remaining height inside #flex-container
.
This snippet works on Firefox, but doesn't work in Chrome. (jsfiddle)
#flex-container{
height: 300px;
width: 500px;
display: flex;
display: -webkit-flex;
flex-flow: column nowrap;
-webkit-flex-flow: column nowrap;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
border: 5px solid black;
}
#container1, #container2{
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
Chrome needs -webkit-
prefixes for flexbox, but the issue doesn't seem to be this.
What can be happening? Is a browser bug or I'm forgetting something?
There are two problems you need to overcome:
Firefox solves them both on its own, but Chrome needs assistance.
Problem #1
The first problem is that flex items, by default, cannot be smaller than their content. An initial setting on flex items is min-height: auto
.
Therefore, a flex item with a replaced element, like an image, will default to the inherent size of the image. The item cannot be made smaller, unless you override the initial setting (use min-height: 0
).
#flex-container {
height: 300px;
width: 500px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
border: 5px solid black;
}
#container1, #container2 {
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
}
img { min-height: 0; } /* NEW */
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
A complete explanation of this issue can be found here:
Problem #2
Then you hit the second problem: keeping the aspect ratio. This is a common problem in flex containers. One option is to define a height for the image:
#flex-container {
height: 300px;
width: 500px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
border: 5px solid black;
}
#container1, #container2 {
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
}
img { min-height: 0; height: 100px; } /* NEW */
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
这篇关于在flexbox中的图像高度在Chrome中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!