本文介绍一种纯 CSS 方案，通过 object-fit: contain 结合固定百分比宽高，自动确保图片在保持宽高比的前提下，最大不超出容器 80% 的宽或高，彻底避免 JavaScript 计算与 DOM 操作。
本文介绍一种纯 css 方案，通过 `object-fit: contain` 结合固定百分比宽高，自动确保图片在保持宽高比的前提下，最大不超出容器 80% 的宽或高，彻底避免 javascript 计算与 dom 操作。
在实际开发中，常遇到这样的需求：希望图片在响应式布局中既保持原始比例，又不突破某一尺寸阈值（如宽度或高度超过视口的 80%）。初看似乎需用 JavaScript 动态读取图片自然尺寸、计算比例、再设置样式——但其实，CSS 已原生支持这一逻辑，且更高效、更可靠。
核心方案是组合使用以下三个 CSS 属性：
-
width: 80%和height: 80%：为图片设定统一的“容器占位框”，即它最多可占据父容器宽高的 80%； -
object-fit: contain：确保图片完整可见、按比例缩放并居中填充该占位框，不会拉伸变形，也不会裁剪； -
display: block+ 居中布局（如margin: auto或 Flex 容器）：消除行内元素默认间隙，并保障视觉居中。
✅ 示例代码（精简可直接复用）：
img.centre {
display: block;
width: 80%;
height: 80%;
object-fit: contain;
margin: auto;
}
同时建议优化 HTML 结构：将 <script></script> 标签从 <div class="gallery"> 内部移除——内联脚本不仅语义不清，还可能因 DOM 未就绪导致执行失败；更重要的是，<strong>本场景完全无需 JS</strong>。若使用 Angular（如原代码中的 <code>*ngFor），也应将尺寸控制交由 CSS，而非混合 JS 逻辑。
⚠️ 注意事项：
-
object-fit在 IE 中不支持（需考虑兼容性时添加降级方案，如max-width/max-height配合height: auto）； - 确保父容器（如
.gallery）具有明确的宽高（例如height: 100vh），否则80%将无参照基准； - 避免同时设置
max-width/max-height与width/height百分比冲突——object-fit依赖显式宽高定义占位区域。
总结：与其用 JavaScript 获取 img.naturalWidth、计算比例、再 style.width = '80%' 并重设 height，不如信任现代 CSS 的表达力。一行 object-fit: contain，即可优雅解决“等比缩放 + 尺寸上限 + 不失真”三大诉求——简洁、声明式、高性能。
