图片加载失败导致Flexbox列溢出的问题及解决诉求

问题背景 #

你构建了一个固定宽度的Flex行布局：左侧是包含带inline宽高属性的图片和标题的Flex列，右侧是占60%宽度的段落。添加inline宽高是为了避免图片加载时的布局偏移（CLS），但图片加载失败时，浏览器生成的占位符会溢出容器；移除inline宽高虽能解决溢出，却会导致布局偏移。

核心原因 #

图片加载失败时，浏览器会优先使用inline的width/height值渲染占位符，忽略Flex容器的宽度约束，导致占位符超出可用空间。

解决方案 #

通过限制图片容器的最大宽度，并强制保持图片比例，同时保留inline宽高属性来实现双重目标：

修改后的CSS代码 #

.container{
  display:flex;
  width:600px;
  align-items:center;
}
.column{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  max-width: 40%; /* 与右侧段落的60%宽度匹配，限制列的最大宽度 */
  flex: 1 1 auto; /* 让列占据剩余可用空间，但不超过max-width */
}
img{
  height:auto;
  min-width:0;
  min-height:0;
  max-width:100%;
  aspect-ratio: attr(width)/attr(height); /* 读取inline宽高计算原始比例 */
  flex: 0 1 auto; /* 避免Flex强制拉伸图片，维持缩放行为 */
}
p{
  flex: 1 0 60%;
}

方案说明 #

1. 限制容器宽度：给.column设置max-width:40%，确保它不会占用超过容器40%的宽度，与右侧段落的60%宽度严格匹配，从根源上避免溢出。
2. 强制比例约束：利用CSS的aspect-ratio: attr(width)/attr(height)读取图片的inline宽高属性，计算出原始比例。无论图片是否加载成功，占位符都会按照这个比例在.column的宽度内自动缩放，既保留了布局稳定性，又不会溢出。
3. 调整Flex行为：将图片的flex属性改为0 1 auto，避免Flex布局强制拉伸图片，确保图片始终按比例缩放。

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