如何让固定宽高比元素最大化填充可用空间且不溢出？

要实现固定宽高比、最大化填充容器且不超出空间的div，只需调整.inner的样式，结合aspect-ratio、max-width和max-height即可解决问题：

核心思路 #

• 用Flex布局让子元素在容器中自动居中
• 通过aspect-ratio固定宽高比
• 用max-width: 100%和max-height: 100%限制子元素不超出容器可用空间，浏览器会自动计算符合宽高比的最大尺寸

完整代码示例 #

body {
  margin: 0;
}

.outer {
  height: 100vh;
  width: 100vw;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  background-color: white;
  aspect-ratio: 4/3; /* 可替换为你需要的比例，比如 calc(2 * sqrt(3)) / 3 */
  max-width: 100%;
  max-height: 100%;
}

<div class="outer">
  <div class="inner"></div>
</div>

问题原因分析 #

你之前设置height: 100%会强制子元素高度占满容器，当容器变窄时，浏览器为维持宽高比会把宽度拉伸到超出水平空间；只加max-width: 100%却不限制高度时，浏览器会优先适配容器尺寸而忽略宽高比。同时设置max-width和max-height后，浏览器会自动判断哪个维度先触达容器边界，再基于宽高比计算另一维度的尺寸，既保证不超出容器，又能维持固定比例。

内容的提问来源于stack exchange，提问作者gaazkam