css的aspect-ratio用于容器宽高比锁定，需配合width/max-width使用，不兼容旧版safari时可用padding-top百分比降级；img的width/height提供固有尺寸防布局偏移，须与object-fit配合控制图片填充方式。
用 aspect-ratio 直接锁定图片容器宽高比（现代浏览器）
HTML 本身没有原生的“图像宽高比锁定”属性，真正起作用的是 CSS 的 aspect-ratio。它作用在**容器**上，不是 <img alt="HTML怎么设置图像高宽比锁定_HTML aspect-ratio容器教程【布局】" > 标签本身——这点容易搞反。
常见错误是给 <img alt="HTML怎么设置图像高宽比锁定_HTML aspect-ratio容器教程【布局】" > 加 aspect-ratio，但 img 是替换元素，部分浏览器（如旧版 Safari）不支持直接在其上生效；更稳妥的做法是套一层 <div> 或用 <code><figure></figure> 作为容器。
- 写法：
aspect-ratio: 16 / 9（注意斜杠前后有空格，不能写成16/9） - 必须配合
width或max-width使用，否则容器可能塌缩为 0 - 若同时设了
height，aspect-ratio会被忽略（CSS 优先级规则） - Safari 15.4+ 才完整支持，低于此版本需降级方案
兼容老浏览器：用 padding-top 百分比模拟 aspect-ratio
这是最成熟、兼容 IE9+ 的方案，核心是利用「块级元素的 padding-top 百分比基于父容器宽度计算」这一特性。
适用场景：需要支持 Safari 15.3 及更早、或某些安卓 WebView（如 UC 内核）。
立即学习“前端免费学习笔记（深入）”；
- 容器设
position: relative，子元素<img alt="HTML怎么设置图像高宽比锁定_HTML aspect-ratio容器教程【布局】" >设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 容器自身不设 height，改用
padding-top: 56.25%（对应 16:9 → 9 ÷ 16 = 0.5625） - 如果图要居中裁剪，
<img alt="HTML怎么设置图像高宽比锁定_HTML aspect-ratio容器教程【布局】" >加object-fit: cover；拉伸填充则用object-fit: fill - 注意：百分比 padding 值必须手动算，4:3 是
75%，1:1 是100%，别记混
<img alt="HTML怎么设置图像高宽比锁定_HTML aspect-ratio容器教程【布局】" > 的 width 和 height 属性还有用吗？
有用，但作用变了：它们现在主要提供**固有尺寸（intrinsic size）**，用于计算 aspect-ratio 的初始值，而不是强制布局尺寸。
比如 <img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="HTML怎么设置图像高宽比锁定_HTML aspect-ratio容器教程【布局】" >，浏览器会自动推导出 aspect-ratio: 4 / 3，即使你没显式写。
- 保留
width/height能避免 layout shift（内容跳动），尤其 SSR 或首屏渲染时 - 但它们不响应式——如果容器变窄，图片仍按原始像素缩放，可能模糊或变形
- 现代写法建议：留着这两个属性，再用 CSS 控制实际尺寸，例如
img { width: 100%; height: auto; } - 不要只设其中一个（比如只设
width），否则浏览器无法推导宽高比，aspect-ratio失效
为什么 object-fit 和 aspect-ratio 要配着用？
aspect-ratio 只管容器形状，不管里面图片怎么铺；object-fit 才决定图片在该容器里是裁剪、拉伸还是保持比例。
典型组合：
-
aspect-ratio: 16 / 9; object-fit: cover→ 图片居中裁剪填满（常用封面图） -
aspect-ratio: 4 / 3; object-fit: contain→ 图片完整显示，上下/左右留白（适合证件照） -
object-fit: none会强行拉伸变形，慎用——除非你明确要像素风效果 - 注意：Safari 对
object-fit支持早于aspect-ratio，所以降级方案里它仍是关键一环
真正麻烦的是混合场景：比如一个卡片组件既要适配不同屏幕，又要兼容微信内置浏览器（X5 内核）、老版 Edge，还得防止图片加载前闪动。这时候 padding-top 方案虽然啰嗦，但比一堆 JS 计算或 polyfill 更稳。
