时间戳

首页 > 解决方案 > 同一 div 中的响应式图像

html - 同一 div 中的响应式图像

问题描述

我有这个简单的脚本，其中有 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/

标签： htmlcssresponsive-images

解决方案

因为每个图像的宽度仍然为 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>

推荐阅读