相同的响应图像 div

Question

我有这个简单的脚本，其中有 2 个响应图像。如果您将 window 最小化，您将相应地调整图像。

但我将 2 张图像放在同一个 div 中，如下所示：

<div class="wrapper">
      <div class="block">
        <img
          src=
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"

        ></img>
        <img
          src=
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"

        ></img>
      </div>

    </div>

我不会产生同样的效果，为什么？

https://jsfiddle.net/zqgy89k7/

Answer 1

因为每张图片的宽度仍然是 100%。将宽度设置为 50% 会使它们再次缩放。同时将高度设置为自动以保持比例。

参见下面的示例：

.wrapper {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  border: solid red;
}

.block {
  display: flex;
  width: 100%;
  border: solid blue;
}

.block img {
  width: 50%;
  max-width: 400px;
  height: auto;
}

<div class="wrapper">
  <div class="block">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
  </div>
</div>

Answer 2

您可以评论heigh: 200px行代码。这将是一个解决方案。

另一种是将flex-wrap: wrap添加到flex-father容器中，这样看起来更有可能。

示例如下：

JS Fiddle with responsive images

相同的响应图像 div

Responsive images in the same div

html

css

responsive-images