如何让多组水平Div响应式适配屏幕并维持宽高比？

要实现屏幕宽度不足时盒子自动缩小且维持宽高比，我们可以用Flexbox结合aspect-ratio属性（或兼容旧浏览器的padding技巧）来完成，步骤如下：

1. 修正HTML结构 #

把每一行的盒子单独放在一个Flex容器中，确保每行布局独立，同时修复原代码中错误的标签闭合：

<!DOCTYPE html>
<html>
<head>
  <title>Box Test</title>
</head>
<body>
  <b>Box Test</b><br><br> Boxes should shrink <u>maintaining their aspect ratio</u>.<br><br> These boxes should shrink when the longest row cannot fit in the screen horizontally<br>
  <div class="Container">
    <div class="Row">
      R1 <div class="Bx"></div><div class="Bx"></div><div class="Bx"></div><div class="Bx"></div><div class="Bx"></div>
    </div>
    <div class="Row">
      R2 <div class="Bx"></div><div class="Bx"></div><div class="Bx"></div><div class="Bx"></div><div class="Bx"></div>
    </div>
    <div class="Row">
      R3 <div class="Bx B4"></div><div class="Bx"></div><div class="Bx"></div><div class="Bx B4"></div><div class="Bx"></div>
    </div>
    <div class="Row">
      R4 <div class="Bx"></div><div class="Bx"></div>
    </div>
    <div class="Row">
      R5 <div class="Bx"></div><div class="Bx B4"></div><div class="Bx"></div><div class="Bx"></div>
    </div>
    <div class="Row">
      R6 <div class="Bx B4"></div><div class="Bx"></div><div class="Bx"></div>
    </div>
  </div>
</body>
</html>

2. 编写Flexbox布局CSS #

• 给每行容器（.Row）设置Flex布局，使其占满屏幕宽度，内部盒子可自适应调整
• 用flex属性定义盒子的基础宽度、缩放规则，结合aspect-ratio维持宽高比

html {
  font-family: verdana;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
.Container {
  width: 100%;
  padding: 0 0.5em;
}
.Row {
  display: flex;
  width: 100%;
  gap: 0.3em; /* 盒子间的间距，可选 */
  margin-bottom: 0.8em;
  align-items: center; /* 让行文本和盒子垂直居中 */
}
.Bx {
  cursor: pointer;
  flex: 0 1 5em; /* 基础宽度5em，不放大，允许缩小 */
  aspect-ratio: 5/2; /* 宽高比5:2，对应原尺寸的5em宽、2em高 */
  border: 1px solid gray;
  background-color: #f7e0f7;
}
.B4 {
  flex-basis: 10em; /* 基础宽度10em */
  aspect-ratio: 5/1; /* 宽高比10:2=5:1，维持原尺寸比例 */
  background-color: #e0f7ff;
}

关键知识点解释 #

• flex: 0 1 5em：三个值分别是flex-grow（是否放大）、flex-shrink（是否缩小）、flex-basis（基础宽度），这里设置为允许缩小、不放大，基础宽度为5em
• aspect-ratio：直接定义盒子的宽高比例，浏览器会自动根据宽度计算高度，确保比例不变
• .Row的display: flex：让内部元素（文本和盒子）在一行内排列，空间不足时触发盒子的缩小规则

兼容旧浏览器方案（可选） #

如果需要兼容不支持aspect-ratio的旧浏览器，可以用padding-top百分比技巧（百分比基于元素宽度计算）：

修改.Bx和.B4的CSS：

.Bx {
  cursor: pointer;
  flex: 0 1 5em;
  border: 1px solid gray;
  background-color: #f7e0f7;
  position: relative;
  height: 0;
  padding-top: 40%; /* 2em/5em = 40%，对应宽高比5:2 */
}
.B4 {
  flex-basis: 10em;
  background-color: #e0f7ff;
  padding-top: 20%; /* 2em/10em = 20%，对应宽高比10:2 */
}

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