只写 height 属性会导致图片拉伸变形、小屏溢出、单位无效、响应式失效，且被w3c视为过时；安全控高应使用 max-height + height: auto 组合，并配合容器约束。
直接设 height 属性最简单，但容易拉伸变形或破坏响应式；真要安全控高，得靠 max-height + height: auto 组合，再配合容器约束。
只写 height 属性会怎样
HTML 的 img 标签支持原生 height 属性，比如 <img src="a.jpg" style="max-width:90%">。浏览器会强制把图片高度压到 150px，宽度则按原始比例自动计算（除非你同时写了 width）。
但问题很实在：
- 如果原图宽高比和目标高度不匹配，图片会被纵向压缩或拉长，肉眼可见失真
- 在小屏幕设备上，固定
height可能导致图片横向溢出父容器 -
height属性值不能带单位（如height="150px"是无效的），只写数字，这点常被忽略 - 现代项目中，该属性已被视为过时实践，W3C 推荐优先用 CSS 控制尺寸
max-height + height: auto 才是安全控高的组合
真正可控又不失真的做法，是放弃固定 height，改用 CSS 的 max-height 限制上限，再让宽度自由缩放：
例如：
<img src="photo.jpg" style="max-width:90%">
关键点：
-
max-height: 200px表示“最多高 200px”，图片实际高度不会超过它 -
height: auto确保浏览器按原始比例反推高度，避免拉伸 -
width: auto必须显式写上，否则某些旧版 Safari 会默认设为 100%，导致宽高比错乱 - 这个组合对父容器有依赖：若父容器没设
width或max-width，图片可能依然撑破布局
当容器高度固定时，object-fit 是唯一解
如果你有一个固定尺寸的容器（比如 300px × 400px），又必须让图片填满它且不扭曲，height 和 max-height 都不管用——这时候得靠 object-fit。
典型写法：
<div style="width: 300px; height: 400px; overflow: hidden;"> <img src="cover.jpg" style="max-width:90%"> </div>
注意：
-
object-fit: cover是等比缩放并裁剪，类似背景图的background-size: cover -
object-fit: contain是等比缩放并完整显示，四周可能留白 -
object-fit必须搭配显式的width和height（比如100%），否则无效 - IE 不支持
object-fit，如需兼容，得用background-image替代方案
srcset 和 sizes 对高度没有直接影响
有人误以为 srcset 能控制显示高度，其实不能。它只负责告诉浏览器「加载哪张源图」，最终渲染高度仍由 CSS 或 HTML 属性决定。
比如这段代码：
<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, 50vw" style="max-width:90%">
它的作用链是：sizes → 决定用哪个 srcset 项 → 浏览器下载对应分辨率图 → 再按 max-height 缩放显示。高度逻辑完全独立于 srcset。
漏掉 sizes 会导致小屏也加载大图，浪费带宽，但不会改变最终显示高度。
真正难处理的不是怎么设高，而是「如何让高度适配动态内容」——比如图文混排时，图片高度随文字行数变化，这时纯 CSS 很难稳住，往往得结合 aspect-ratio 或 JS 监听容器尺寸。这个层面容易被跳过，但线上 bug 多半出在这儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
