如何实现完全响应式的1张大图与2张小图并列布局效果？

你现有代码的核心问题是固定了容器高度、大图高度自适应导致无法填满容器、背景图设置不合理导致留白，且没有做小屏适配，以下是优化后的完全响应式实现：

完整代码 #

HTML 代码 #

<div class="container">
  <div class="big-image"></div>
  <div class="twoSmallImages">
    <div class="img1"></div>
    <div class="img2"></div>
  </div>
</div>

CSS 代码 #

.container {
  margin: auto;
  width: 78vw;
  /* 用aspect-ratio控制整体宽高比，替代固定高度，保证响应式下比例不变 */
  aspect-ratio: 16 / 9;
  background-color: aqua;
  border-radius: 8px;
  display: flex;
  gap: 1%;
}

.big-image {
  background: url("https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&k=20&m=929998552&s=170667a&w=0&h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=");
  width: 66%;
  height: 100%;
  /* 用cover保证背景图填满容器，居中显示 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
}

.twoSmallImages {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 33%;
  gap: 2%;
}

.img1 {
  background: url("https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&k=20&m=929998552&s=170667a&w=0&h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=");
  flex: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  border-radius: 8px;
}

.img2 {
  background: url("https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&k=20&m=929998552&s=170667a&w=0&h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=");
  flex: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: brown;
  border-radius: 8px;
}

/* 移动端适配：屏幕宽度小于768px时改为上下布局 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    aspect-ratio: auto;
    height: auto;
  }
  .big-image {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .twoSmallImages {
    width: 100%;
    flex-direction: row;
    aspect-ratio: 16 / 4.5;
  }
}

核心优化点 #

• 用aspect-ratio替代固定高度，保证布局在任何屏幕尺寸下都不会变形，高度随宽度自动适配
• 背景图改用background-size: cover配合background-position: center，保证图片填满容器不会出现留白
• 用gap属性控制元素间距，替代手动写margin，代码更简洁也不会出现 margin 塌陷问题
• 增加移动端断点适配，小屏下自动切换为大图在上、两张小图并排在下的布局，适配所有设备尺寸
• 去掉不必要的flex-wrap: wrap，布局逻辑更可控

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