无需 JavaScript，仅通过 width: 80%、height: 80% 配合 object-fit: contain 即可自动保持宽高比、防止溢出，并确保图片始终适配容器且不超过视口的 80%。
无需 javascript，仅通过 `width: 80%`、`height: 80%` 配合 `object-fit: contain` 即可自动保持宽高比、防止溢出，并确保图片始终适配容器且不超过视口的 80%。
在响应式图像布局中，常见需求是：让图片在保持原始宽高比的前提下，尽可能大显示，但宽度和高度均不超过容器（或视口）的 80%。许多开发者第一反应是用 JavaScript 动态计算尺寸——但其实现代 CSS 已完全支持这一逻辑，更简洁、高效且无运行时开销。
✅ 推荐方案：纯 CSS 实现（零 JS）
核心在于组合使用以下三个声明：
-
width: 80%和height: 80%：为图片设定统一的“约束框”（bounding box），即最大允许占据的空间； -
object-fit: contain：确保图片完整可见、按比例缩放、不裁剪、不拉伸； -
display: block+ 居中布局（如flex容器 +justify-content/align-items: center）：消除行内元素默认间隙，并精准居中。
以下是优化后的完整示例代码：
/* 重置基础样式，确保高度可继承 */
html, body {
height: 100%;
margin: 0;
}
body {
background-color: #AEAEAE;
display: flex;
justify-content: center;
align-items: center;
}
.gallery {
/* 移除绝对定位干扰，改用语义化居中 */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.centre {
display: block;
width: 80%;
height: 80%;
object-fit: contain;
/* 可选：添加轻微背景便于观察缩放效果 */
background: rgba(0, 0, 0, 0.05);
}
<div class="gallery">
@@##@@
</div>
<div class="idk">
<p class="roboto">hi</p>
</div>
⚠️ 注意事项：
- 原 HTML 中
<script></script>标签嵌套在<div class="gallery"> 内部是无效且危险的（HTML 规范禁止在 <code><div> 中直接写脚本而不包裹逻辑；且 <code>*ngFor是 Angular 语法，在纯 HTML 中无效）。请移除内联脚本，避免解析错误。object-fit: contain兼容性良好（Chrome 32+, Firefox 36+, Safari 10+, Edge 16+），如需支持旧版 IE，才需回退至 JavaScript 方案。- 若必须使用 JS（例如需兼容 IE 或做复杂条件判断），可监听
load事件后读取naturalWidth/naturalHeight与offsetWidth/offsetHeight，再动态设置style.width/style.height——但本例中完全没必要。总结：优先用 CSS 解决视觉布局问题。
object-fit: contain是处理响应式图像缩放的黄金属性，配合百分比尺寸，既语义清晰，又性能卓越。
