直接给<img>加aspect-ratio无效，因为<img>是替换元素，自带固有尺寸且默认display: inline，不参与盒模型高度计算；必须用块级容器包裹并满足：display为block/flex/grid、有明确宽度（如width: 100%）、未同时设置width和height。
直接给![怎样使用CSS aspect-ratio固定图片比例]()
加aspect-ratio没用，为什么？
因为<img>是替换元素，自带固有宽高比，浏览器会优先按原始尺寸渲染——你写aspect-ratio: 16/9会被忽略，除非它失去“固有尺寸”的主导权。
常见错误现象：图片在小屏下被压缩变形、留白、或完全不响应容器宽度。
- 别在
<img>上直接设aspect-ratio（哪怕加了width: 100%也大概率失效） - 必须把图片包进一个容器（比如
<div>或<figure>），对这个容器设aspect-ratio - 容器需是块级或参与 Grid/Flex 布局（
display: block或display: grid等），否则aspect-ratio可能不触发 - 容器不能同时设
width和height两个确定值，否则比例计算被绕过
aspect-ratio生效的最小必要条件
只满足以下三点，aspect-ratio才能真正起作用：
- 容器有至少一个明确尺寸约束（例如
width: 100%、max-width: 400px，或处于 Grid track 中） - 容器未被设为
display: inline（默认<div>没问题，但<span>要加display: block） - 没同时设置
width和height（哪怕一个是auto也不行——height: auto可省略，aspect-ratio已隐含该行为）
示例正确写法：
立即学习“前端免费学习笔记（深入）”；
.card {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
旧版 Safari 或 IE 用户怎么办？
aspect-ratio在 Safari
- 最可靠 fallback 是
padding-top百分比 hack，需配合position: relative+absolute定位 - 别混用：这个方案和 Flex/Grid 的自动尺寸逻辑冲突，不能套在
grid-item里直接用 - 用
@supports (aspect-ratio: 1/1)包裹现代写法，避免老浏览器解析出错 - 服务端若能提供图片宽高，建议在
<img>上保留width/height属性，既助 SSR 渲染，也防 layout shift
Grid 布局里图片比例突然乱了，怎么调？
Grid 只划分轨道，不管 item 内容怎么长。即使你写了grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，图片仍可能溢出或留白——问题不在 Grid，而在 grid item 没锁住比例。
- 给每个 grid item（比如
.gallery-item）加aspect-ratio，不是 grid 容器本身 - 确保 grid item 是块级（
display: block），尤其 Bootstrap 的.col默认是 flex item，需显式设display: block -
object-fit必须配齐：width: 100%; height: 100%; object-fit: cover，且<img>要display: block（否则基线间隙破坏高度） - 避免用
object-fit: fill——它强制拉伸，彻底破坏比例
复杂点在于：比例控制和布局系统是两层事。你得先让容器有比例，再让内容在里面安分填满。漏掉任一环，图片就“不听话”。
