必须用ratio容器包裹图片并配合w-100 h-100和object-fit:cover，因img-fluid仅等比缩放不约束高度，ratio类通过伪元素或aspect-ratio稳定维持宽高比，缺一不可。
直接给 <img> 加 width 和 height 行内样式，或依赖 img-fluid，都无法真正保持固定宽高比——它只会等比缩放，但高度随内容流塌陷，比例随时被打破。
用 ratio 容器包裹图片（Bootstrap 5.3+）
ratio 类是唯一能稳定维持比例的原生方案，它不靠图片自身尺寸，而是用伪元素撑开容器高度。
-
ratio-16x9、ratio-4x3、ratio-1x1等类已预设好aspect-ratio和position: relative，无需手写 CSS - 必须配合
w-100 h-100和object-fit: cover（或contain），否则图片会溢出或拉伸 - 不要给内部
<img>设height行内样式，否则覆盖h-100，破坏比例控制 - 若容器需具体高度（比如卡片中统一为 200px），额外加
style="height: 200px;"——ratio只管比例，不管绝对尺寸
<div class="ratio ratio-16x9"> @@##@@ </div>
旧版 Bootstrap（5.2 及以下）用 padding-top 模拟比例
没有 ratio 类时，aspect-ratio 兼容性差（IE 完全不支持，旧 Safari 不稳定），只能退回到 padding 技巧。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 外层
<div> 设 <code>position-relative，再用padding-top值模拟比例（如 16:9 →56.25%） - 图片必须用
position-absolute铺满，且top: 0; left: 0; width: 100%; height: 100% - 漏掉
position-relative，绝对定位会脱离预期上下文，图片飘走 - 此写法兼容 IE9+，但维护成本高；升级到 5.3+ 后应尽快替换
<div class="position-relative" style="padding-top: 56.25%"> @@##@@ </div>
为什么不能只靠 img-fluid 或 object-fit
img-fluid 只设 max-width: 100% 和 height: auto，它让图片宽度自适应，但高度完全由原始比例决定——父容器没高度，它就塌陷；父容器高度变化，比例立刻失守。
-
object-fit: cover必须作用在有明确宽高的容器内，单独加在<img src="photo.jpg" class="w-100 h-100" style="max-width:90%">上无效（浏览器优先按固有尺寸渲染，忽略object-fit） - 直接把
<img src="photo.jpg" class="position-absolute top-0 start-0 w-100 h-100" style="max-width:90%">放进col，会导致列高度被图片原始尺寸撑开，破坏栅格对齐 - 想让图片“填满”某区域并保持比例，本质是控制容器，不是控制图片本身
图片来自 CMS 或用户上传时的关键处理
尺寸不可控时，object-fit: cover 是底线；但更要防小图被强行拉伸变形，或大图加载慢引发布局抖动（CLS）。
- 务必在
<img>标签上写width和height属性（如width="800" style="max-width:90%"），这是浏览器预留空间、避免抖动的唯一可靠方式 - 如果后端无法提供原始尺寸，至少按典型比例估算（如封面图默认 16:9），在
ratio容器里 fallback - 别用
background-image替代<img>除非你明确需要语义缺失、SEO 不友好、且无法设置alt的场景
真正卡住人的从来不是怎么写，而是忘了容器本身需要被“锚定”：没有显式高度或比例约束的父容器，任何 object-fit 或 img-fluid 都只是空中楼阁。
