图片被拉伸的本质是width/height硬约束破坏了intrinsic aspect ratio；应优先用aspect-ratio+object-fit控制比例与填充，避免内联宽高。
图片被拉伸的本质是 width/height 硬约束破坏了 intrinsic aspect ratio
浏览器渲染图片时，默认按原始宽高比（intrinsic aspect ratio）显示。一旦你写了 width: 100%; height: 200px; 或 width: 300px; height: 100%;，就强制覆盖了原生比例，导致拉伸或压扁。
常见触发场景包括：img 直接设固定 height、父容器用 flex 且子项未限制比例、CSS Grid 中未设置 aspect-ratio 或 object-fit。
用 object-fit 控制内容填充方式（现代方案）
object-fit 作用于 <img> 本身，不改变容器尺寸，只决定图片如何适配其盒模型。它和 background-size 类似，但语义更清晰、支持语义化图片。
-
object-fit: contain;：完整显示，留白；适合头像、图标等需保全细节的场景 -
object-fit: cover;：裁切填满，无拉伸；适合 Banner 图、封面图 -
object-fit: fill;：强行拉伸填满（就是你正在避免的行为） - 必须配合明确的宽高容器，例如
width: 100%; height: 200px;，否则无效
img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center; /* 可选：控制裁切锚点 */
}用 aspect-ratio 锁定容器比例（推荐搭配 object-fit）
仅靠 object-fit 还不够——如果父容器高度塌陷（比如 Flex 容器未设高），img 仍可能被压缩。此时应让容器自己“记住”比例。
立即学习“前端免费学习笔记（深入）”；
-
aspect-ratio: 16 / 9;是最直接的方式，现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已稳定支持 - 可与
width: 100%组合，自动推算高度，无需 JS 或 padding-top hack - 响应式中可结合媒体查询动态调整：
@media (max-width: 768px) { .hero-img { aspect-ratio: 4 / 3; } }
.img-container {
width: 100%;
aspect-ratio: 4 / 3;
background-color: #f0f0f0;
}
<p>.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}兼容老浏览器的 fallback 方案（padding-top hack）
当必须支持 Safari 15.3 或更早版本时，aspect-ratio 不可用，得用传统技巧：利用 padding-top 百分比基于宽度计算的特性模拟比例。
- 原理：
padding-top: 56.25%;对应 16:9（9 ÷ 16 = 0.5625） - 容器设
position: relative;，img设position: absolute;并撑满 - 注意：该方法下
img不再参与文档流，需确保父容器有明确宽度（如max-width或width）
.aspect-16x9 {
position: relative;
width: 100%;
max-width: 1200px;
padding-top: 56.25%; /* 16:9 */
}
<p>.aspect-16x9 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}实际项目里最容易被忽略的是：同时设置了 width 和 height 的 img 标签，会覆盖所有 CSS 比例控制逻辑。务必检查 HTML 中是否写了 <img src="..." width="600" height="400"> —— 这些内联尺寸优先级高于 CSS，必须删掉或用 !important 覆盖（不推荐）。
