本文介绍一种无需修改 HTML 结构、仅通过纯 CSS 实现图片在其父容器内居中显示并保持原始宽高比缩放（类似 object-fit: contain 效果）的可靠方案。
本文介绍一种无需修改 html 结构、仅通过纯 css 实现图片在其父容器内居中显示并保持原始宽高比缩放（类似 `object-fit: contain` 效果）的可靠方案。
要实现图片在全屏固定容器中水平垂直居中，且其外层 <div>（<code>.container-inner-01）自动收缩为图片缩放后的实际尺寸（而非撑满整个视口），同时严格维持原始比例、不裁剪、不拉伸——关键在于：避免依赖 max-width/max-height 的不确定性行为，转而利用 Flex 布局的固有收缩特性与 width: 100%; height: 100% 的约束组合。
以下是推荐的完整 CSS 解决方案：
.container-outer-01 {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.container-inner-01 {
/* 移除 max-width/max-height —— 它们会干扰自动尺寸收敛 */
/* 改用 inline-flex 或 block + img 自适应，更可控 */
display: inline-flex; /* 关键：使容器收缩包裹内容 */
overflow: hidden;
border-radius: 20px;
outline: dashed red;
}
.container-inner-01 img {
/* 强制 img 成为 flex 项目，并拉伸至容器可用空间 */
display: block; /* 推荐用 block 替代 flex，避免嵌套 flex 引发的尺寸循环 */
width: 100%;
height: 100%;
object-fit: contain; /* ✅ 直接启用原生 contain 行为 —— 简洁、语义清晰、兼容性好（≥ IE11/Edge 16+） */
vertical-align: middle;
}✅ 最佳实践强调：现代浏览器已广泛支持
object-fit: contain，它正是为解决此类需求而生——无需 hack、无需 JS、无需计算比例。将object-fit: contain应用于<img alt="如何使用纯 CSS 实现图片在固定容器中居中并按比例缩放适配" >元素本身，配合.container-inner-01设置display: inline-flex（或display: inline-block），即可让外层 div 精确包裹缩放后的图像，同时整体在.container-outer-01中完美居中。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要给
.container-inner-01设置width或height固定值，否则会破坏“自适应包裹”行为； - 若需兼容旧版 IE（background-image +
background-size: contain方案，但需调整 HTML 结构（本例因限制不可行）； -
display: flex在img上（如答案中所示）虽可行，但易引发布局歧义（如基线对齐问题），display: block+object-fit更稳定、语义更明确。
最终效果：无论图片原始尺寸是 600×400、1200×300 还是 200×800，它都会在全屏容器中等比缩放至最大可能尺寸，完整可见，居中呈现，外层圆角边框始终紧密贴合图像边界。
