探究图片与content box的尺寸关系：CSS设置的作用对象

核心结论 #

你对CSS作用对象的推测是完全正确的：设置img的width和height时，本质是在修改该元素的content box尺寸，图片本身的固有尺寸（300px×300px）并不会被改变。图片内容的显示方式，由object-fit属性控制。

详细解释 #

1. 替换元素的特性
   img属于CSS中的「替换元素」，这类元素的内容（比如图片像素数据）并非由CSS或HTML直接生成，而是来自外部资源。替换元素的content box是一个容器，专门用来承载这些外部内容。

2. width/height的作用
   当你为img设置如下样式时：

img {
  height: 300px;
  width: 200px;
}

你只是给这个content box设定了固定尺寸，图片的原始像素数据并没有被拉伸或修改——只是浏览器按照object-fit的规则，把图片内容放入这个容器中。

3. object-fit的行为验证

• 默认值object-fit: fill：强制将图片内容拉伸至完全填满content box，这就是你看到图片变形的原因。
• 设置object-fit: cover：图片会保持自身的宽高比，通过裁剪超出部分的方式填满content box，此时content box的300px×200px尺寸完全不变，只是图片内容的显示区域被限制在了这个盒子内。

规范参考方向 #

在CSS Images Module Level 3规范中，明确规定了替换元素的content box尺寸由CSS盒模型属性（width、height等）控制，而替换内容的适配规则由object-fit和object-position定义。你可以重点查看规范中「Replaced Elements」和「object-fit property」相关章节。

内容的提问来源于stack exchange，提问作者ralph.m