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

Question

我试图获得一个标题，其高度与屏幕成比例，并包含带标题的图像。尝试的解决方案使用行flex布局。目的是使标题占视口/父高度的比例（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%;
}

期望的结果：

实际结果：

Answer 1

只需将图片容器设置为高度为100％。

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

说明：好的，首先，您的容器设置为其父级的20％。在这种情况下它的身体。您可以使用随机尺寸提取图像，这样您就会遇到尺寸超过其父容器的情况（.container，.image-view）。

分配给所有图片的max-height/max-width属性在您的父级（.image-view）上明确设置高度之前，不知道其最大值。一旦完成，它就会在下面的小提琴中正确地约束自己。

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