直接给 img 加 min-height 基本无效，因其为替换元素且 height: auto 下不响应 min-height；真正起效的是用 ratio 容器占位、min-height 作用于父级、object-fit 控制缩放。
直接给 img 加 min-height 基本无效——它不触发渲染，也不约束容器空间；真正起效的是用 ratio 容器占位 + min-height 作用于父级 + object-fit 控制内部缩放行为。
为什么 min-height 写在 img 上没反应
常见错误现象：<img class="img-fluid" style="max-width:90%"> 在小屏下仍显示为一条细线，或高度完全由宽度决定。这是因为：
-
img-fluid的核心是max-width: 100%+height: auto，浏览器优先按原始宽高比缩放，min-height对height: auto的元素不起约束作用 -
<img>是替换元素（replaced element），其min-height不会“撑开”自身，也不会影响父容器高度 - 若图片加载前父容器无占位，布局抖动（CLS）会让
min-height更不可靠
正确做法：用 ratio 容器 + min-height 父级 + object-fit
把限制逻辑从图片本身转移到它所在的容器上，才能真正控制视觉高度：
- 用
<div class="ratio ratio-16x9"> 提供宽高比占位，避免加载前空白 <li>给该 <code><div> 加 <code>style="min-height: 200px;"或响应式类如min-vh-md-30 - 内部
<img>加class="img-fluid"并显式设style="max-width:90%"（填满）或object-fit: contain;（完整居中） - 别同时写
width行内属性和min-height，它们会干扰比例计算
示例：
<div class="ratio ratio-4x3" style="min-height: 250px;"> @@##@@ </div>
响应式 min-height 该用什么单位
纯像素值（如 200px）在手机上可能过高、桌面又偏矮；更合理的选择取决于场景：
- 全屏 Banner 区域：用
min-height: 50vh或min-vh-md-75（≥768px 生效） - 内容区 Logo 或图标：用
min-height: 4rem或min-height: calc(2rem + 10px)，随字体缩放 - 需兼容 Safari 地址栏收放：优先用
min-height: 50dvh（2026 年已广泛支持） - 避免对文字区域用
dvh，长文本可能被硬截断；此时改用min-height: 50vh+overflow-y: auto
容易被忽略的细节
哪怕代码都写对了，以下三点常导致效果不出现：
<div class="ratio"> 外层如果套了未设高度的 <code><div>（比如某个自定义 wrapper），<code>min-height就失去参照- 用了
img-fluid却没删掉 Bootstrap 默认给.navbar-brand img加的height: 1.5rem类，它会覆盖object-fit行为 - SVG 图片自带
viewBox，object-fit对它无效；必须用width/height+preserveAspectRatio控制
