最简单可靠的保比方式是只设width属性，浏览器依原始宽高比自动计算height，兼容所有现代及旧版浏览器；需用纯数字值（如width="400"），禁用单位或百分比以确保生效。
直接设 width 并省略 height，浏览器会自动按原始比例计算高度——这是最简单、最可靠、兼容性最好的保持宽高比方式。
只写 width 属性，height 让浏览器算
HTML 的 <img> 标签在只提供 width（或只提供 height）时，会严格依据图片原始像素比推导另一个值。这不是“猜测”，而是浏览器内置行为，所有现代浏览器包括 IE9+ 都支持。
- 写法示例：
<img src="photo.jpg" style="max-width:90%">—— 不加height，高度自动匹配 - 支持单位：纯数字（如
width="400"）默认是 px；也可用百分比（width="80%"），此时高度仍等比缩放 - 错误示范：
<img src="photo.jpg" style="max-width:90%" style="max-width:90%">—— 若原图不是 4:3，图片必然拉伸变形 - 注意：该方式对 layout shift（布局跳动）友好，浏览器能提前预留正确高度空间
style="width: 100%; height: auto;" 是响应式首选
当需要图片随容器宽度变化（比如文章正文、卡片内嵌图），用 CSS 写 height: auto 比 HTML 的 width 属性更可控，且优先级更高，能覆盖掉标签上的 width/height 值。
- 推荐写法：
<img src="photo.jpg" style="max-width:90%"> - 为什么不用
height: 100%？它依赖父元素有明确高度，而多数场景父容器高度是内容撑开的，会导致图片塌陷 - 搭配
max-width: 100%更安全：style="max-width: 100%; height: auto;"，防止父容器意外变窄时图片溢出 - 如果父容器用了
display: flex或grid，记得给<img>加flex-shrink: 0，否则可能被压缩到 0 宽度
object-fit 不是调比例，是控填充方式
很多人误以为 object-fit 能“保持比例”，其实它是在已知宽高容器内决定图片怎么放——前提是容器本身已有明确尺寸（比如设置了 width 和 height 或 aspect-ratio）。
- 必须配合显式尺寸才生效：
<img src="photo.jpg" style="max-width:90%"> -
object-fit: contain→ 等比缩放并完整显示，可能留白 -
object-fit: cover→ 等比缩放并裁剪，填满整个区域 - 不设宽高只写
object-fit是无效的，浏览器没参考基准，照样按原图渲染
原始宽高比丢失？查 src 图片本身
即使你写了 width="600" height="auto"，如果浏览器显示仍变形，大概率是图片文件元数据损坏或被工具无损重压过，导致宽高比信息丢失（常见于某些 CMS 导出或微信下载图）。
- 验证方法：右键图片 → “在新标签页中打开”，看地址栏 URL 是否能直接访问原图；再用本地看图软件打开，检查属性里的“尺寸”是否与预期一致
- 临时修复：用
<picture></picture>+<source></source>换一张元数据正常的同内容图 - 长期建议：构建流程中加入图片校验步骤，比如用
identify -format "%wx%h" image.jpg（ImageMagick）确认原始尺寸
真正容易被忽略的点是：浏览器是否真的“知道”原图比例。HTML 层面的写法再标准，也救不了元数据异常的图片——先验图，再调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
