如何用纯CSS实现内部元素宽高比固定且居中缩放？

css3 实现内部元素宽高比固定且居中缩放

许多前端开发场景中，需要在一个大小未知的容器内，保持内部元素的宽高比不变，同时还要保证该元素居中显示并最大化地利用容器空间。本文将探讨如何仅使用 css (以及 less) 来实现这一需求，无需借助 javascript。

问题描述如下：外部 div 包裹内部 div，内部 div 需要保持固定的宽高比（例如 4:3），而外部 div 的宽高是未知的。内部 div 必须居中显示，并尽可能放大，直到它的宽度或高度触碰到外部 div 的边界。换句话说，如果外部 div 的宽高比大于 4:3，则内部 div 的高度应该与外部 div 的高度一致；反之，内部 div 的宽度应该与外部 div 的宽度一致。

解决方案的关键在于 css 的 aspect-ratio 属性和 flex 布局。 aspect-ratio 属性可以轻松地设置元素的宽高比。 而 flex 布局则可以方便地实现元素的居中对齐。

以下 css 代码片段展示了如何实现这一目标：

立即学习“前端免费学习笔记（深入）”；

.outer {    display: flex;    align-items: center;    justify-content: center;    border: 1px solid #aaa; /* 可选：添加边框方便观察 */}.inner {    aspect-ratio: 4 / 3;    max-height: 100%;    max-width: 100%;}

登录后复制