使用Flexbox实现全屏四象限图片布局的问题

需求说明 #

• 四个象限组合后完全填满浏览器窗口，无水平/垂直滚动条
• 每张图片以object-fit: contain的效果完全填充所在象限容器，无溢出、内边距或间距
• 所有图片宽高比一致，但实际尺寸可能不同

现有代码问题 #

当前实现未给容器设置明确高度，导致图片容器尺寸无法稳定，object-fit: contain无法正常生效，同时存在潜在的间距问题。

修正后的实现代码 #

CSS 代码 #

/* 重置全局样式，消除默认边距 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden; /* 确保窗口无滚动 */
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: 100vh; /* 容器填满整个窗口 */
}

.item {
  flex: 0 0 50%; /* 固定占比50%，不拉伸不收缩 */
  max-width: 50%;
  height: 50vh; /* 每个象限占窗口高度的一半 */
  position: relative;
  box-shadow: 0 0 0 1px black; /* 用于区分象限，可根据需求移除 */
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 图片自适应填充容器，保持比例且不溢出 */
  display: block; /* 消除图片默认的行内元素间距 */
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四象限图片布局</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item"><img src="https://dummyimage.com/400x200/000/fff"></div>
        <div class="item"><img src="https://dummyimage.com/800x400/000/fff"></div>
        <div class="item"><img src="https://dummyimage.com/1200x800/000/fff"></div>
        <div class="item"><img src="https://dummyimage.com/2400x1600/000/fff"></div>
    </div>
</body>
</html>

关键修改说明 #

1. 全局样式重置：通过*选择器消除所有元素的默认边距和内边距，确保布局无额外间距
2. 容器尺寸锁定：给.container设置width:100vw和height:100vh，强制填满整个窗口；overflow:hidden确保窗口不会出现滚动条
3. 象限尺寸固定：.item使用flex:0 0 50%固定宽度占比，height:50vh固定高度占比，保证四个象限正好填满窗口
4. 图片自适应配置：图片设置width:100%;height:100%配合object-fit:contain，实现自适应填充容器、保持宽高比且不溢出；display:block消除图片作为行内元素的默认间距

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