CSS如何用aspect-ratio保持图片比例

• 容器设 aspect-ratio: 16 / 9（或任意比值，如 4 / 3、1 / 1）
• 容器设 width: 100%（响应式宽度）
• 图片设 width: 100%; height: 100%; object-fit: cover（或 contain，按需选择）

避免直接在 img 上用 aspect-ratio

是替换元素，aspect-ratio 在它上面不会强制约束渲染尺寸，仅影响其内在尺寸计算（比如作为 flex 或 grid 子项时的基准），但无法保证视觉比例稳定。实测中常出现拉伸、裁剪异常或完全无效果。

配合 max-width 和 object-fit 精确控制

仅靠 aspect-ratio 不足以应对所有场景，需组合使用：

• 容器加 max-width: 100% 防止溢出父级
• 图片用 object-fit: cover 保持比例并填满（可能裁剪）；用 contain 完整显示但留白
• 若需响应式切换比例（如移动端改 4:3），可用媒体查询重设容器的 aspect-ratio

兼容性注意（2024 年主流已支持）

aspect-ratio 在 Chrome 88+、Firefox 89+、Safari 15.4+、Edge 88+ 均原生支持。如需兼容 Safari 15.3 及更早版本，可回退用 padding-top 百分比技巧（即“垂直 padding hack”），但现代项目通常无需降级。

今天关于《CSS如何用aspect-ratio保持图片比例》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！