Flexbox问题：<a>容器保留图片原始宽度而非缩放后宽度

这个问题我碰到过好几次了，核心原因是Flexbox在图片加载完成前，没法获取它的实际显示比例，只能用图片的原始尺寸来计算父元素<a>的大小——而你给<a>设置了flex: 0 0 0（完全禁止收缩），所以才会出现加载时<a>被原始宽度撑开，点击后触发重排才恢复正常的情况。

下面是几个可行的解决方案，按推荐优先级排序：

方案1：提前告知浏览器图片的宽高比（最优） #

在<img>标签上添加原始尺寸的width和height属性，让浏览器在图片加载前就知道它是1:1的正方形比例。这样当图片被设置为height: 100%时，浏览器会自动算出对应的宽度，<a>标签就不会被原始宽度撑开了，还能避免布局偏移（CLS），符合Web性能优化的最佳实践。

修改后的HTML代码：

<a href="#"><img src="img.png" alt="alt" width="1039" height="1039"></a>

方案2：允许<a>标签收缩 #

把<a>的flex属性从0 0 0改成0 1 0，保留不放大的特性，但允许它根据内部图片的实际尺寸收缩。这样即使浏览器一开始用原始宽度计算，图片加载完成后<a>也会自动收缩到正确的大小。

修改后的CSS代码：

a { flex: 0 1 0; }

方案3：强制<a>标签隐藏溢出内容 #

给<a>添加overflow: hidden属性，强制它的尺寸不超过内部图片的显示尺寸，避免被原始宽度撑开。这个方案可以和原有的flex: 0 0 0搭配使用：

修改后的CSS代码：

a { flex: 0 0 0; overflow: hidden; }

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