min-height对img无效是因为img默认为inline元素，而该属性仅对块级或格式化上下文元素生效；需配合display:block或inline-block及height:auto才能起作用。
HTML 本身没有 min-height 属性，img 标签的原生 height 只能设固定值，无法实现“最小高度”语义；真要约束下限，必须用 CSS 的 min-height，但需注意它对 img 默认行内行为不直接生效。
为什么直接写 min-height 在 img 上没反应
因为 img 是替换元素（replaced element），默认 display 为 inline，而 min-height 对 inline 元素无效。浏览器会忽略它，图片仍按原始尺寸或 width/height 属性渲染。
- 常见错误现象：写了
style="min-height: 200px;"，但小图依然显示得又矮又细，毫无变化 - 必须先让
img变成块级或弹性项：加display: block或display: inline-block - 仅设
min-height不够——若图片原始高度小于该值，height: auto会失效，图片不会自动拉高（它不会“撑开”自己） - 真正起效的组合是：
display: block; min-height: 200px; height: auto;，但要注意：这仅在图片宽度足够、比例允许的前提下才可能达到最小高度
min-height + object-fit 才能可靠控制最小视觉高度
当你要确保图片区域“至少高 200px”，且内容不能留白、不能拉伸变形，就得把容器和图片职责分开：容器设 min-height，图片用 object-fit 填满。
- 典型场景：卡片式布局中，封面图区域必须保持统一高度，但源图比例各异
- 正确写法：
<div style="min-height: 200px; width: 100%; overflow: hidden;"> @@##@@ </div>
-
object-fit: cover确保等比缩放后裁剪填满，object-fit: contain则会留白，但保证完整 - IE 不支持
object-fit，如需兼容，得用background-image替代方案，此时min-height可直接作用于 div
只靠 HTML height 属性无法实现“最小”语义
height="200" 是强制固定高度，不是“不低于 200px”。它会无条件拉伸或压缩图片，破坏宽高比，且在响应式场景中极易溢出或失真。
- 错误示范：
<img src="cover.jpg" style="max-width:90%">—— 小图被纵向拉长，大图被压扁 - 该属性值不能带单位（
height="200px"无效），只接受纯数字，这点常被忽略 - W3C 已将
width/height属性标记为“过时（obsolete）”，现代项目应避免依赖 - 如果必须用 HTML 属性，只设
width（如width="600"），留height不写，浏览器会按比例算高——但这仍是固定宽度，不是最小高度
真正需要“最小高度”的地方，往往隐含了容器语义。别试图让 img 自己扛住这个责任，把它放进有 min-height 的块级容器里，再用 object-fit 或 background-size 控制内部表现，才是稳定解法。细节上，overflow: hidden 和 display: block 这两个看似次要的声明，常常就是效果是否生效的分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
