CSS如何实现图片宽高比保持_利用aspect-ratio属性设定

aspect-ratio属性在现代浏览器中可直接使用，Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持，IE及旧版Safari不支持。aspect-ratio属性在现代浏览器中是否能直接用能，但得看目标用户环境。Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持 aspect-ratio，IE 和旧版 Safari（常见错误现象是：本地开发看着正常，上线后图片被拉伸或塌陷——大概率是用户用了旧版 Safari 或微信内置浏览器（部分安卓微信仍用 X5 内核，不支持 aspect-ratio）。使用场景主要是响应式卡片、头图、商品图等需要「宽度自适应 + 高度随比例撑开」的布局，比如：.card-img { width: 100%; aspect-ratio: 16 / 9; }不支持aspect-ratio时的兼容 fallback 怎么写不能只靠 aspect-ratio，必须搭配传统方案兜底。最稳妥的是「padding-top 百分比占位」，它不依赖 JS，兼容到 IE8。立即学习“前端免费学习笔记（深入）”；关键点在于：父容器需设 position: relative，子元素用绝对定位填满；padding-top 的百分比值 = (高度 ÷ 宽度) × 100%，例如 4:3 → padding-top: 75%。不要给 img 直接设 height: 100% —— 它会撑破 padding 占位区img 必须设 position: absolute; top: 0; left: 0; width: 100%; height: 100%为避免文字流干扰，父容器建议加 overflow: hidden示例结构：<div class="aspect-box"> <img src="..." alt=""></div>对应 CSS：.aspect-box { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ overflow: hidden;}.aspect-box > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}object-fit 和 aspect-ratio 配合时容易错哪aspect-ratio 只管容器比例，不管内容怎么铺；object-fit 才决定图片如何适配这个框。两者必须一起用，否则图片可能被裁切或留白。 Adobe Image Background Remover Adobe推出的图片背景移除工具