无需 JavaScript，仅通过 width: 80%、height: 80% 配合 object-fit: contain 即可强制图片在不溢出、不变形的前提下，最大占据容器 80% 的宽高空间，并自动按原始宽高比缩放适配。
无需 javascript，仅通过 `width: 80%`、`height: 80%` 配合 `object-fit: contain` 即可强制图片在不溢出、不变形的前提下，最大占据容器 80% 的宽高空间，并自动按原始宽高比缩放适配。
在实际开发中，我们常遇到这样的需求：让图片在保持原始宽高比的前提下，同时约束其宽度和高度不超过视口或父容器的 80%，且避免拉伸、裁剪或溢出。很多人第一反应是用 JavaScript 动态计算尺寸——但其实，现代 CSS 提供了更简洁、高效、响应式的原生方案。
核心方案是组合使用以下三个声明：
-
width: 80%和height: 80%：为图片设定统一的最大渲染尺寸边界（注意：这是“目标尺寸”，非强制拉伸）； -
object-fit: contain：确保图片完整可见、等比缩放，并在该 80%×80% 的框内居中显示，留白区域由透明或背景色填充； - （可选）
display: block+ 居中布局（如margin: auto或 Flex 容器）进一步优化视觉对齐。
✅ 示例 CSS（精简可复用版）：
img.centre {
display: block;
width: 80%;
height: 80%;
object-fit: contain;
margin: auto; /* 配合父容器 display: flex 可实现绝对居中 */
}
⚠️ 注意事项：
-
object-fit: contain是关键：它不同于cover（会裁剪），也不同于默认的fill（会变形），它严格保持比例并缩放到完全可见； - 确保父容器有明确尺寸（如
height: 100vh或display: flex+align-items/justify-content: center），否则80%高度可能失效； - 不要再设置
max-width或max-height与width/height同时作用，以免冲突；object-fit已隐含“自适应约束”逻辑； - 兼容性良好：Chrome 32+、Firefox 36+、Safari 10+、Edge 16+ 均支持，移动端全覆盖。
? 进阶提示：若需适配不同屏幕，可将 80% 替换为 min(80%, 600px)（CSS clamp 或 min() 函数），实现响应式上限控制。总之，优先用 CSS 解决布局逻辑，既性能更优，也更易维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
