为何display:table容器内的<img>加载失败时会宽度溢出？

问题原因 #

当图片加载失败时，浏览器会将HTML属性width/height作为图片的固有尺寸来渲染。而设置了display: table的<figure>元素，其宽度计算遵循CSS表格布局规则：

1. 默认table-layout: auto时，表格宽度会优先适应内部元素的固有尺寸，而非严格遵守自身的max-width限制
2. 此时<img>的max-width: 100%是相对于被撑开的<figure>宽度（即图片的HTML属性宽度600px），而非预期的容器400px，导致图片突破父容器宽度

这属于浏览器遵循CSS表格布局规范的正常渲染特性，并非Bug。

不移除display:table的解决方案 #

以下几种方案均可解决该问题，无需移除display: table：

方案1：为表格元素设置固定布局 #

给<figure>添加table-layout: fixed和width: 100%，强制表格宽度受max-width约束，内部元素自适应表格宽度：

.wp-block-image.aligncenter {
  display: table;
  margin: 0 auto 1em;
  max-width: 400px;
  table-layout: fixed; /* 强制固定布局 */
  width: 100%; /* 让表格宽度继承max-width */
}

方案2：强制图片宽度继承父容器 #

给<img>添加width: 100%，覆盖HTML属性的宽度设置，同时保留max-width确保响应式：

img {
  max-width: 100%;
  width: 100%; /* 强制宽度继承父元素 */
  height: auto;
  background: #ccc;
}

方案3：用容器包裹图片 #

在<figure>内添加一个块级容器，限制图片的可用宽度范围：

<figure class="wp-block-image aligncenter">
  <div class="img-wrapper">
    <img src="path/to/nonexistent/image.gif" width="600" height="50">
  </div>
  <figcaption>Missing image, width="600"</figcaption>
</figure>

.img-wrapper {
  width: 100%;
  overflow: hidden;
}

验证效果 #

修改后，即使图片加载失败，<img>也会被限制在<figure>的max-width范围内，不会突破父容器的400px宽度。

内容的提问来源于stack exchange，提问作者frkly