本文介绍一种无需修改 html 结构、仅通过纯 css 即可让图片在其父容器内居中显示并按原始宽高比缩放至最大尺寸的可靠方案，兼容现代浏览器且语义清晰。
本文介绍一种无需修改 html 结构、仅通过纯 css 即可让图片在其父容器内居中显示并按原始宽高比缩放至最大尺寸的可靠方案，兼容现代浏览器且语义清晰。
要实现图片在全屏固定容器中水平垂直居中，同时保持原始宽高比、不裁剪、不拉伸、尽可能大（即等效于 object-fit: contain 的行为），关键在于合理利用 CSS 布局机制与图像固有尺寸特性。
虽然 <img> 元素天然支持 object-fit，但本例中 .container-inner-01 是必需的包裹层（不可移除），且需确保该层尺寸紧贴图片内容（而非撑满父容器），因此不能简单对 img 设置 width: 100%; height: 100%——这会导致图片被强制拉伸变形。
✅ 正确解法是：将 img 设为 display: block（或 flex），并结合 max-width: 100%; max-height: 100% + height: auto，让浏览器根据其固有宽高比自动计算缩放后的尺寸；同时，.container-inner-01 需保留 max-width/max-height 限制和 overflow: hidden，以确保其尺寸由内部图片实际渲染尺寸决定（即“包裹内容”）。
以下是优化后的完整 CSS（已验证兼容性，无冗余声明）：
.container-outer-01 {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.container-inner-01 {
max-width: 100%;
max-height: 100%;
overflow: hidden;
border-radius: 20px;
outline: dashed red;
}
.container-inner-01 img {
display: block;
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
? 关键说明：
-
display: block消除图片默认的行内基线间隙； -
max-width/max-height: 100%限定缩放上限； -
height: auto; width: auto确保浏览器按比例缩放，而非强制填充； - 不设置
width或height固定值，避免破坏响应式等比逻辑； -
.container-inner-01自动收缩为图片缩放后的真实尺寸，因此border-radius和outline会自然作用于该内容区域。
⚠️ 注意事项：
- 若图片尺寸极小（如 50×50px），在大容器中仍会按比例放大至
max-width/max-height边界，符合contain语义； - 旧版 IE 不支持
object-fit，但本方案兼容 IE9+（因未使用该属性）； - 如需支持 SVG 或背景图场景，可改用
background-size: contain，但本题明确要求<img>标签结构，故不适用。
此方案简洁、健壮、无需 JavaScript，是纯 CSS 实现“容器内等比居中图片”的推荐实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
