如果加载失败，图像会导致列弹性框溢出

Question

我对以下问题感到困惑：

我创建了一个固定宽度的弹性行，其中包含两个元素： 一个由两个元素组成的 Flex 列：一个图像，其宽度和长度在其 html 标签和一个段落中给出，以及一个占据宽度 40% 的较大段落，如下所示：

示例

问题是：如果图片加载失败，其占位符就会溢出。在我看来，这不应该发生。我预计损坏的图像占位符的尺寸与未损坏的尺寸完全相同。这是怎么回事？我该怎么办？

我添加了内联宽度和高度，以避免加载时布局发生变化。我知道删除它们可以解决问题。有没有办法避免溢出并完全避免布局问题？

这是问题的 JSfiddle：https://jsfiddle.net/ory40tmf/2/

<div class="container">
<div class="column">
<img width="790" height="679" src="https://www.webkit.org/blog-files/acid3-100.png" alt="Description">
<h2>Image!</h2>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut neque hendrerit, tempor neque ac, sollicitudin odio. Nulla pharetra orci mollis, scelerisque arcu ac, convallis dui. Vivamus augue lectus, semper sed eleifend sed, dignissim nec augue. In hac habitasse platea dictumst. Nam gravida nisl ligula, et faucibus felis imperdiet sed. Vestibulum eget orci tristique, molestie lectus id, varius lectus. 
</p>
</div>

.container{
  display:flex;
  width:600px;
  align-items:center;
}
.column{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
img{
        height:auto;
        min-width:0;
        min-height:0;
        max-width:100%;
        flex: 1 1 auto;
}
p{
          flex: 1 0 60%;
}

这是同一个 JSfiddle，但图像损坏（相同的 css）：https://jsfiddle.net/ory40tmf/3/

<div class="container">
<div class="column">
<img width="790" height="679" src="https://www.webkit.org/blog-files/acid3-1030.png" alt="Description">
<h2>Image!</h2>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut neque hendrerit, tempor neque ac, sollicitudin odio. Nulla pharetra orci mollis, scelerisque arcu ac, convallis dui. Vivamus augue lectus, semper sed eleifend sed, dignissim nec augue. In hac habitasse platea dictumst. Nam gravida nisl ligula, et faucibus felis imperdiet sed. Vestibulum eget orci tristique, molestie lectus id, varius lectus. 
</p>
</div>

Answer 1

图像损坏时会发生什么取决于浏览器。 Chrome 和 Safari 使用 img 标签中指定的尺寸。 790px 的宽度必须溢出宽度为 600px 的容器。为了避免这种情况，我要么不以这种方式指定它们，要么稍后在 css 中覆盖它。要控制布局并使其在加载时独立于图像，我建议：

1. 通过控制容器的尺寸而不是内容来定义布局。

2. 给出相对值（弹性、百分比），而不是固定值（px）。

这些定义似乎达到了预期的结果：

.container{
  display:flex;
  width:600px;
  align-items:center;
}
.column{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex: 1 1 40%; /* moved to container level */

}
img{
        height:auto;
        min-width:0;
        min-height:0;
        max-width: 100%;
        width: auto; /* added */
}
p{
          flex: 1 0 60%;
}