width设值、height: auto时浏览器按原始宽高比等比缩放图片，不裁剪不拉伸；object-fit: cover则等比缩放并裁剪以完全覆盖容器，需容器有明确宽高。
图片等比例缩放时 width 和 height: auto 是什么行为
这是最基础的等比缩放方式：只设 width（比如 width: 100%;），height 留为 auto，浏览器会自动按原始宽高比计算高度。它不裁剪、不拉伸，只缩放，适合响应式容器中保持图面完整。
常见错误是同时写死 width 和 height（比如 width: 200px; height: 150px;），这会导致失真；或者忘了重置 max-width: 100%，在小屏下溢出父容器。
- 适用场景：头图、文章配图、需要完整展示内容的图
- 注意
<img>标签默认有display: inline，可能引发底部空白，加display: block或vertical-align: top更稳妥 - 如果父容器宽高固定但图片比例不匹配，这种写法会让图片变小留白，不会填满
object-fit: cover 的实际效果和限制
object-fit: cover 让图片**等比缩放并裁剪**以完全覆盖容器，类似 CSS 背景的 background-size: cover。它不改变图片原始尺寸，只控制“如何放进容器里”。
容易踩的坑是以为它能替代 width/height 设置——其实必须先给容器明确宽高（比如 width: 300px; height: 200px;），否则 cover 没作用；另外它只对 <img> 和 <video> 生效，对 background-image 无效。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：头像、卡片图、需要统一尺寸且允许裁剪的图集
- 裁剪位置默认居中，无法直接控制（需配合
object-position，如object-position: top left） - IE 不支持，如需兼容得用 polyfill 或降级为 background 方案
object-fit 其他值对比：contain、fill、none
object-fit 一共 5 个值，除了 cover，最常用的是 contain：等比缩放至完全可见，留白但不裁剪，效果类似 width: 100%; height: auto，但更可控（因为强制适应容器尺寸）。
fill 会拉伸填满，破坏比例；none 完全不缩放，只截取左上角区域；scale-down 是前两者的最小结果（取 none 和 contain 中更小的那个）。
img {
width: 300px;
height: 200px;
object-fit: contain; /* 等比缩放，保证全图可见 */
background: #eee;
}-
contain和width: 100%; height: auto视觉结果常一样，但前者能精准约束容器尺寸，后者依赖图片原始尺寸 -
fill和none基本只用于特殊动效或调试，日常慎用 - 所有
object-fit值都要求容器有明确宽高，否则行为不可控
真正要解决的问题：你到底想“保形”还是“填满”
别纠结语法，先明确需求：是否允许裁剪？是否必须撑满容器？是否要适配不同比例的图源？
如果图源比例固定（比如全是 4:3），用 width: 100%; height: auto 最轻量；如果图源杂乱（用户上传头像）、又要求卡片高度一致，object-fit: cover 加固定容器尺寸是标准解法；如果既要填满又要控制裁剪焦点，就得加 object-position 配合。
最后提醒一点：很多框架（如 Next.js 的 <Image>）默认启用 object-fit: cover，但会悄悄加 height: "100%"，导致父容器没设高就塌陷——检查 computed styles 里的实际渲染尺寸，比看代码更可靠。
