aspect-ratio 是现代浏览器保留图片原始比例最简洁方案，配合 width:100%; height:auto; 实现响应式缩放，旧版 safari 需 fallback padding-bottom（按高度/宽度×100%计算），并辅以 object-fit 控制裁剪方式，服务端预注入宽高比最可靠。
用 aspect-ratio 直接设宽高比最省事
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）原生支持 aspect-ratio，它是目前保留图像原始比例最干净的方式——不用 JS、不依赖容器、不 hack padding-bottom。
常见错误是给 <img alt="HTML怎么设置图像原始比例_HTML aspect-ratio保留教程【显示】" > 同时设 width 和 height 属性，或者用内联 style="max-width:90%"，这会让图片在响应式容器里拉伸变形或留白失控。
-
aspect-ratio: 16 / 9;写法稳定，斜杠前后加空格更安全 - 配合
width: 100%; height: auto;才能真正响应式缩放 - 如果图源本身宽高比不确定，别硬写死值；优先用
aspect-ratio: auto;（需图有 intrinsic 尺寸） - Safari 15.4 之前不支持，降级方案得另配
padding-bottom或 JS
fallback 到 padding-bottom 时怎么算百分比
当需要兼容旧浏览器，padding-bottom 是最可靠的 CSS fallback，但它的百分比是相对于父容器宽度计算的，不是图片自身尺寸——这点最容易搞错。
比如一张 800×600 的图，原始宽高比是 4/3（≈1.333），那么 padding-bottom 应该设为 75%（因为 3 ÷ 4 = 0.75）。
立即学习“前端免费学习笔记（深入）”；
- 公式就是：
padding-bottom: calc((原始高度 / 原始宽度) * 100%); - 别用图片文件名或 alt 文字猜比例，要用真实尺寸或 CMS 输出的元数据
- 父容器必须有明确宽度（比如
max-width: 100%;），否则padding-bottom会失效 - 记得把
<img alt="HTML怎么设置图像原始比例_HTML aspect-ratio保留教程【显示】" >设为position: absolute;并铺满容器，否则 padding 留的空白不会“撑开”布局
object-fit 不是解决比例问题，而是解决裁剪方式
很多人混淆 aspect-ratio 和 object-fit：前者管“容器该多高”，后者管“图在里面怎么摆”。设了 aspect-ratio 之后，object-fit 才真正有意义。
-
object-fit: cover;会裁图，适合封面图；contain会留白，适合图标或证件照 - 没设
aspect-ratio或容器高度不确定时，object-fit可能完全没效果 -
object-position配合cover能微调裁剪区域，比如object-position: center top; - 注意
object-fit在部分安卓 WebView 里支持不稳定，测试时别只看 Chrome 桌面版
服务端或构建时预知宽高比更可靠
前端硬算比例总有风险：图片加载慢、JS 未执行前闪动、CMS 返回的尺寸字段缺失。最稳的方式是在 HTML 输出阶段就把比例带上。
比如 Next.js 的 Image 组件、Nuxt 的 NuxtImg，或自定义 SSR 模板中读取图片 metadata，生成带 style="--aspect-ratio: 1.777;" 的容器，再用 CSS 变量驱动 aspect-ratio。
- Node.js 可用
sharp或probe-image-size提前读取尺寸 - Webpack/Vite 插件如
vite-plugin-image-presets能在构建时注入宽高比 - 避免在 React/Vue 组件里用
useEffect+ref读取图片 naturalWidth —— 用户滚动快时根本来不及执行 - CDN 如 Cloudflare Images、Imgix 支持 URL 参数返回宽高，可直接拼进 HTML
实际项目里，aspect-ratio 加 object-fit 是主线，但 fallback 和服务端注入这两层得同时存在；漏掉任意一层，都可能在某个机型或网络状态下露出白边或拉伸。
