Question

我发现这篇帖子Flex item with image child doesn't adjust from its original width，我最初认为它有答案，但它没有，......当使用设定高度时，它已经部分完成了。

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

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

这不一定是flexbox解决方案，但我希望有一个CSS，意思是 没有脚本 。

修改

给定文字的高度可能是动态的，并且根据其内容，因此预定义的200px只是为了给它一个高度JSFiddle demo, set 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>

预期结果（硬编码）

.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>

Answer 1

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

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

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

.text {
    background: lightblue;
}

.text-content {
    width: 200px;
}

<强>更新

我会留下旧答案以防万一，但这似乎有效codepen。我尝试过不同数量的行和文字大小。

.container {
  display: inline-flex;
}

.img img {
  height:100%;
}

.text {
  background: lightblue;
}

带有图像子项的弹性项目无法正确调整其大小

1 个答案: