为什么弹性项目内缩放图像的实际宽度会影响项目的宽度？答案

【问题标题】：Why does the actual width of a scaled image inside a flex item affect item's width?为什么弹性项目内缩放图像的实际宽度会影响项目的宽度？
【发布时间】：2023-04-11 05:12:02
【问题描述】：

我试图实现一个高度与屏幕成比例的标题，并包含一个带有标题的图像。尝试的解决方案使用了行弹性布局。目的是让标题占视口/父高度的比例（20％）。图片及其父对象的宽度应根据图片的纵横比与缩放后的图片宽度相匹配。标题的父 div 应该占据剩余的宽度并增长以填充任何可用的水平空间。

容器正在使用具有比例高度的固定定位。

Chrome 54 和 Firefox 50 中的实际行为是图像的父元素占据了容器宽度的大部分，而这个宽度由图像的实际宽度（而不是图像的缩放宽度）决定。当图像缩小到该宽度的一小部分时，我不明白这一点。

在此处重现此行为的示例：https://jsfiddle.net/uy66as8k/

HTML：

<div class="container">
  <div class="img-view">
    <img src="http://lorempixel.com/800/600/"></img>
  </div>
  <div class="title-view">
    <h1>This is the Title</h1>
  </div>
</div

CSS：

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 20%;
  margin: 0;
  position: fixed;
  left: 0;
  top: 0;
}

.img-view {
  background-color: salmon;
  flex: 0 0 auto;
}

.title-view {
  background-color: cyan;
  flex: 1 0 auto;
}

img {
  max-height: 100%;
  max-width: 100%;
}

期望的结果：

实际结果：

【问题讨论】：

“当图像缩小到该宽度的一小部分时，我不明白这一点” - 因为图像纵横比得到尊重……？为了使图像更宽，如果要保留纵横比，它还需要更高。但是高度受容器元素的高度和图像上的 max-height: 100% 的限制。
您能否发布一个期望的最终结果的示例...？
我为观察到的和期望的结果添加了图像。我还更新了问题以尝试澄清我不希望图像更宽 - 我希望容器的宽度与之匹配，以便标题窗格可以填充额外的空间。
我在 iPad 上使用 Safari，无法重现该问题。您是否尝试过简单地删除图像容器并使图像成为 flex 容器的子容器？换句话说，图像作为弹性项目？
我也无法在 macOS 10.11.6 上使用 Safari 进行复制。使用 img 作为弹性项目并避免父 div 为这个示例提供了预期的结果，但没有解释问题中的行为，对我来说不是一个实际的解决方案。

标签： css google-chrome flexbox css-position gecko

【解决方案1】：

只需将图像容器的高度设置为 100%。

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

解释： 好的，首先你将你的容器设置为它的父容器的 20%。在这种情况下，它的身体。您正在提取具有随机尺寸的图像，因此您会遇到尺寸超过其父容器的情况（.container、.image-view）。

分配给所有图像的max-height/max-width 属性不会知道它的最大值，直到您明确设置其父级 (.image-view) 的高度。一旦完成，它将正确地约束自己，如下面的小提琴所示。

https://jsfiddle.net/uy66as8k/3/

【讨论】：

能否回答问题中的“为什么”？我仍然无法清楚地理解为什么会发生这种行为以及父级上的height: 100% 在这里有何不同。
发布了我的答案并被拉走。里面还有一些你不需要的东西，我需要再看一遍。给我几分钟时间写下解释。
我理解解释，但我不确定它是否完全解释了原始行为。如果我将高度设置为90px 而不是20%，问题仍然存在。此外，当 img 正确按比例缩小时，它似乎确实知道它的最大高度。浏览器遇到的问题是在 img-view 上设置宽度。
@Eoin 你的图片需要一个容器吗？
我的情况需要容器，问题是解释容器的行为。已经确定不用它也能达到效果。