CSS相对尺寸是如何计算的？定位容器内图片宽度表现疑问

核心前置规则 #

你遇到的所有表现差异都是三个CSS基础规则共同作用的结果：

1. 百分比宽度的计算基准：元素设置width: 100%时，百分比值相对于其「包含块」的可用宽度计算。如果包含块的宽度处于auto状态（宽度需要由内部内容决定），则百分比宽度失效，触发元素自身的默认尺寸规则。
2. 替换元素的默认尺寸逻辑：<img>属于典型的替换元素，自带固有原始尺寸，当外部宽度计算失效时，会优先使用自身固有尺寸；普通非替换元素（如<div>）没有固有尺寸，相同场景下表现不同，这就是你用非图片元素无法复现的原因。
3. 定位元素的宽度计算规则：
   • 未设置宽度的fixed/absolute定位元素，默认宽度为「收缩适配」，即宽度由内部内容的尺寸决定；
   • absolute定位元素如果未设置left/right偏移属性，不会自动占满包含块的宽度，仍遵循收缩适配规则；
   • 脱离正常流的元素（fixed/absolute）不会撑开父级正常流容器的尺寸。

场景1：fixed容器直接包裹width:100%的图片 #

代码：

<div style="position:fixed">
  <img style="width:100%" src="https://via.placeholder.com/150x300.png" />
</div>

表现解释：
fixed容器未设置宽度，遵循收缩适配规则，宽度需要由内部内容决定。而图片的width:100%需要基于fixed容器的宽度计算，形成循环依赖，此时百分比宽度失效，图片回退使用自身150px的固有宽度，fixed容器随之被撑开为150px，符合你观察到的表现。

场景2：fixed容器套absolute容器再套width:100%的图片 #

代码：

<div style="position:fixed">
  <div style="position:absolute">
    <img style="width:100%" src="https://via.placeholder.com/150x300.png" />
  </div>
</div>

表现解释：
absolute元素脱离正常流，不会撑开外层fixed容器的尺寸，此时fixed容器的正常流没有内容，宽度默认是0。
absolute元素的包含块是外层宽度为0的fixed容器，且未设置left/right属性，遵循收缩适配规则，宽度需要由内部图片决定。而图片的width:100%需要基于absolute容器的宽度计算，再次形成循环依赖，此时会优先取包含块（fixed容器）的0宽度作为基准，因此图片渲染宽度为0。

场景3：width:100%的fixed容器套absolute容器再套width:100%的图片 #

代码：

<div style="position:fixed;width:100%">
  <div style="position:absolute">
    <img style="width:100%" src="https://via.placeholder.com/150x300.png" />
  </div>
</div>

表现解释：
虽然外层fixed容器的宽度已经是100%视口宽度，但内层absolute容器未设置left/right属性，仍遵循收缩适配规则，宽度需要由内部图片决定。图片的width:100%需要基于absolute容器的宽度计算，循环依赖再次触发，百分比宽度失效，图片回退使用自身150px的固有宽度。
如果给absolute容器增加left:0;right:0属性，即可让absolute容器的宽度基于fixed容器确定为100%视口宽度，此时图片的width:100%就有了明确的计算基准，会占满整个视口。

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