Flex图像子项目不能正确调整其大小 [英] flex item with image child doesn't adjust its size properly

问题描述

我发现这篇文章， Flex item与图像的孩子不会调整从原来的宽度，我最初认为有答案，但它没有，...部分它做了，当使用设置的高度。

我想要和预期在这里发生的事情是，图像匹配文本元素的高度，然后调整其宽度，同时保持其比例。

这似乎可以在Chrome中使用，但不能在Edge / IE / Firefox中使用。由于我没有iOS设备，因此无法测试Safari，所以如果有人可以分享它的工作方式，我将不胜感激。

不需要是 flexbox 解决方案，尽管我期待CSS的一个，也就是 no script 。 >

---

编辑

可以是动态的，并且基于它的内容，所以预定义的 200px 就是给它一个高度，

---

JSFiddle demo，set height 。 JSFiddle演示，以内容为基础的高度

Stack snippet

data-console =falsedata-console =false> div class =snippet-code>

.container {display：i文本内容{宽度：200px;}

 < div class =container> < div class =img> < img src =http://placehold.it/160x90> < / DIV> < div class =text> < div class =text-content>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br> < / DIV> < / div>< / div>  

$ b $ hr b

预期结果（硬编码）

  .container {display：inline-flex;}。img img {height：100％;宽度：355px; / *强制改正宽度* /}。text {background：lightblue;}。text-content {width：200px;}  

 < div class =container> < div class =img> < img src =http://placehold.it/160x90> < / DIV> < div class =text> < div class =text-content>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br>一些文字内容< br> < / DIV> < / div>< / div>  

解决方案

您应该在 .container 级别定义高度。以下的CSS将适用于你上面提到的所有浏览器：

$ $ $ $ $ c $ .container {
display：inline-flex;
height：200px;
}

.img {
height：100％;
}
.img img {
height：100％;
}

.text {
background：lightblue;
}

.text-content {
width：200px;

更新 $ b

我会离开旧的答案，以防万一，但这似乎工作 codepen 。
我尝试了不同数量的行和文本大小。

  .container {
 display：inline-flex; 
} 
 
 .img img {
 height：100％; 
} 
 
 .text {
 background：lightblue; 
} 
  

I found this post, Flex item with image child doesn't adjust from its original width, which I initial thought had the answer, but it didn't, ... well partially it did, when a set height is used.

What I want and expect to happen here, is that the image matches the text element's height and then adjust its width while keeping its ratio.

This appears to work in Chrome, but not in Edge/IE/Firefox. Haven't been able to test Safari as I don't have an iOS device, so I would appreciate if someone can share how/if it work there.

This doesn't need to be a flexbox solution, though I expect a CSS one, meaning no script.

---

Edit

The given text's height could be dynamic, and based on its content, so the predefined 200px was simply to give it a height, JSFiddle demo, set height .

---

JSFiddle demo, content based height

Stack snippet

.container {
  display: inline-flex;
}

.img img {
  height:100%;
}

.text {
  background: lightblue;
}

.text-content {
  width: 200px;
}

<div class="container">
  <div class="img">
    <img src="http://placehold.it/160x90">
  </div>
  <div class="text">
    <div class="text-content">
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
    </div>
  </div>
</div>

---

Expected result (hard coded)

.container {
  display: inline-flex;
}

.img img {
  height:100%;
  width: 355px;            /*  force correct width  */
}

.text {
  background: lightblue;
}

.text-content {
  width: 200px;
}

<div class="container">
  <div class="img">
    <img src="http://placehold.it/160x90">
  </div>
  <div class="text">
    <div class="text-content">
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
    </div>
  </div>
</div>

解决方案

You should define the height at the .container level. Following CSS will work for all the browsers you mentioned above:

.container {
    display: inline-flex;
    height: 200px;
}

.img {
    height: 100%;
}
.img img {
    height:100%;
}

.text {
    background: lightblue;
}

.text-content {
    width: 200px;
}

UPDATE

I'll leave the old answer just in case but this seems to work codepen. I've tried with varying number of lines and text sizes.

.container {
  display: inline-flex;
}

.img img {
  height:100%;
}

.text {
  background: lightblue;
}

这篇关于Flex图像子项目不能正确调整其大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！