在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 。

因此，带有替换元素的flex项目，就像一个图像，将默认为图像的固有大小。除非您覆盖初始设置（使用 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:

• Why doesn't flex item shrink past content size?

---

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屋！