width: 100%; height: 100%会强制拉伸图片导致变形，因忽略原始宽高比；应改用max-width: 100%; height: auto，或结合object-fit、background-image、aspect-ratio等方案保持比例。
为什么width: 100%; height: 100%会让图片变形
这是最常踩的坑：直接给 <img> 设 width: 100%; height: 100%，浏览器会强行拉伸图片填满容器，完全无视原始宽高比。哪怕原图是 4:3，容器是 16:9，结果也一定是压扁或拉长。
根本原因在于：这两个声明是“硬性尺寸锁定”，不触发比例计算。浏览器不会去读取图片的 naturalWidth 和 naturalHeight，只按你写的像素值渲染。
- 必须避免单独使用
width: 100%—— 高度不会联动，要么溢出要么留白 -
max-width: 100%; height: auto才是安全底线，它让浏览器自己算高度 - 如果容器本身尺寸不固定（比如 flex 子项），还要防
min-width: auto锁死缩放，加min-width: 0强制允许收缩
object-fit: cover 和 object-fit: contain 怎么选
当你已经给 <img> 明确设了宽高（比如 width: 300px; height: 200px），object-fit 才真正起作用。它不改图片原始尺寸，只控制“怎么塞进框里”。
-
object-fit: cover：等比缩放 → 填满整个容器，超出部分裁剪。适合头图、卡片封面，但要配object-position: center（默认值）保重点居中 -
object-fit: contain：等比缩放 → 完整显示图片，四周留白。适合产品图、文档截图，需确保父容器有背景色或边框，否则白边突兀 - 别忘了加
display: block，否则<img>底部默认有空白（行内元素基线对齐导致）
用 background-image 实现填充+居中更稳吗
是的，尤其当图片只是装饰性用途（比如 banner 背景、登录页大图），background-image 比 <img> 更可控，且天然规避行内间隙、语义干扰等问题。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 核心三句：
background-size: cover（填满不变形）、background-position: center（视觉中心对齐）、background-repeat: no-repeat - 必须保障容器有明确高度：
html { height: 100% }+body { min-height: 100vh; margin: 0 }，否则背景只显一截 - 如果容器是 flex 项，注意
min-height: 0可能被继承覆盖，显式重置更保险
现代方案：aspect-ratio 控制容器，再填图
如果你能接受 Chrome 88+、Firefox 89+、Safari 15.4+（即基本放弃 IE 和旧安卓 WebView），aspect-ratio 是最干净的解法——它让容器自己“记住比例”，图片只需填满即可。
- 写法：
.card-img { width: 100%; aspect-ratio: 16/9; }，里面<img>设width: 100%; height: 100%; object-fit: cover; - 优势：不依赖图片原始尺寸，响应式下比例始终稳定；
aspect-ratio: attr(width)/attr(height)动态取值目前几乎不支持，别试 - 兼容 fallback：对不支持的浏览器，用
padding-top百分比模拟（如 16:9 →padding-top: 56.25%），再绝对定位图片填满
真正容易被忽略的是上下文约束：flex/grid 容器的 min-width/min-height 默认值、<img> 的默认 inline 行为、以及 background 高度链断裂——这些细节不处理，再漂亮的 CSS 也会失效。
