object-fit 是控制图片缩放行为最直接有效的方案，支持 contain（完整显示）和 cover（填满裁剪）等值，需配合明确容器尺寸；现代推荐 aspect-ratio + object-fit 组合，兼顾语义与维护性；纯 HTML 可仅设 width 或 height 之一保持比例；兼容旧浏览器可用 padding-top 技巧。
用 object-fit 控制图片缩放行为
HTML5 本身不提供“自动保持宽高比”的属性，但现代浏览器支持的 object-fit 是最直接有效的方案。它作用于 <img alt="HTML5如何保持图片比例_HTML5保持图片比例方法【完整】" > 元素，决定图片如何适应其容器尺寸。
-
object-fit: contain：完整显示图片，留白；适合头像、图标等需看清全貌的场景 -
object-fit: cover：填满容器，可能裁剪；适合封面图、轮播图等强调视觉冲击的场景 - 必须配合明确的容器尺寸（如
width和height），否则无效 - IE 不支持，若需兼容 IE，得回退到其他方案
<div style="width: 300px; height: 200px; border: 1px solid #ccc;"> <img src="photo.jpg" style="max-width:90%" alt="HTML5如何保持图片比例_HTML5保持图片比例方法【完整】" > </div>
用 aspect-ratio 固定容器比例（CSS 新特性）
aspect-ratio 不操作图片本身，而是让图片的父容器维持固定宽高比，再结合 object-fit 或自然流式布局，就能稳定呈现不失真图片。这是目前语义最清晰、维护性最强的做法。
- 支持值如
aspect-ratio: 16 / 9、aspect-ratio: 1 / 1 - 搭配
width: 100%和height: auto，图片会随容器等比缩放 - 注意：Safari 15.4+、Chrome 88+、Firefox 89+ 支持；旧版 Safari 需用
padding-top技巧模拟 - 不要对
<img alt="HTML5如何保持图片比例_HTML5保持图片比例方法【完整】" >直接设aspect-ratio，它只对块级容器生效
<div style="width: 100%; max-width: 600px; aspect-ratio: 4 / 3; background: #eee;"> <img src="photo.jpg" style="max-width:90%" alt="HTML5如何保持图片比例_HTML5保持图片比例方法【完整】" > </div>
不用 CSS 的纯 HTML 方案：只设 width 或 height 之一
如果完全不想依赖 CSS，仅靠 HTML 属性也能保持比例——前提是原始图片尺寸已知，且你愿意放弃响应式弹性。
- 只写
width="400"，不写height：浏览器会按原始宽高比自动计算高度 - 只写
height="300"，不写width：同理，宽度自动推算 - 同时写死
width和height会导致拉伸变形，务必避免 - 此法在响应式页面中容易失效（比如容器变窄时图片溢出），仅适合静态、固定尺寸场景
<img src="photo.jpg" style="max-width:90%" alt="示例图">
兼容老浏览器的 padding-top 响应式技巧
当目标环境包括旧版 Safari 或需要深度兼容时，padding-top 百分比方案仍是可靠选择。它的核心是利用「块级元素的 padding-top 百分比基于宽度计算」这一特性来撑开容器高度。
立即学习“前端免费学习笔记（深入）”；
- 外层
<div> 设 <code>position: relative和width: 100% - 内层伪占位
<div> 设 <code>padding-top: 56.25%（对应 16:9）并position: absolute - 图片用
position: absolute覆盖其上，width: 100%; height: 100% - 这个技巧绕过了对
aspect-ratio的依赖，但结构略重，维护成本略高
<div style="width: 100%; position: relative;"> <div style="padding-top: 56.25%; background: #f0f0f0;"></div> <img src="photo.jpg" style="max-width:90%" alt="HTML5如何保持图片比例_HTML5保持图片比例方法【完整】" > </div>实际项目中，优先用
aspect-ratio + object-fit 组合；若需保底兼容，再叠加 padding-top 方案。最容易被忽略的是：容器必须有明确宽度来源（比如父级设了 max-width 或 flex 分配），否则所有比例控制都会失效。
