Question

我有这个简单的脚本，其中有2张响应图像。如果您将窗口最小化，则图像将相应地显示。

但是我将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中的响应式图像

2 个答案: