如何让Flexbox容器内的两张图片铺满屏幕宽度

我无法让两张图片在相对定位下保持相同宽度。两张图片分别放在item1和item2两个div中，再嵌套于flexbox容器内。

HTML代码 #

<!-- parliament background -->
<div class="container">
  <div class="item1">
    <img
      class="img3"
      src="pictures/1920px-Parliament_of_Hungary_November_2017.jpg"
      alt=""
      style="width: 100%"
    />
  </div>
  <!-- parliament end -->
  <!-- mountain background -->
  <div class="item2">
    <img
      class="img4"
      src="pictures/output-onlinepngtools.png"
      alt=""
      style="width: 100%"
    />
  </div>
  <!-- mountain end -->
</div>

CSS代码 #

/* parliament photo */
.img3 {
  width: 100%;
  height: auto;
  opacity: 20%;
}

/* mountain photo */
.img4 {
  height: auto;
  width: 100%;
}

.container {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
}

要让两张图片保持相同宽度，按以下步骤调整：

• 给.item1和.item2设置统一的flex规则，确保它们宽度一致：

.item1, .item2 {
  flex: 1 1 100%; /* 垂直排列时占满容器宽度，若需横向等分则改为50% */
  box-sizing: border-box;
}

• 移除图片上的内联style="width: 100%"，避免和CSS定义冲突。
• 若需要相对定位容器，把.container的position: absolute改为position: relative，绝对定位会脱离文档流，可能导致容器宽度异常：

.container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

调整后，两个item容器会有一致的宽度，图片会填满各自容器，从而保持相同宽度。

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