HTML 两张图片并排放置，填充资源管理器窗口的整个宽度

Question

我正在寻找一种解决方案，以并排放置两张图片，并填充Explorer窗口的完整宽度。 这两张照片具有不同的格式（肖像和景观）。然后，同一行中的两张照片都应具有相同的高度。例如，如示例照片所示，但不能如下所示。 有这样的方法吗？

Answer 1

图片如下显示：

<a><img src="leftpicture.jpg" alt="">
</a>
<a><img src="rightpicture.jpg" alt="">
</a>

Answer 2

The HTML: 
   `<div class="row">
        <div class="column">
          <img src="image.png" style="width:100%">
        </div>
        <div class="column">
          <img src="image.png" style="width:100%">
        </div>
    </div>`

The css:
`<style>
.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 5px;
}
</style>

`

Answer 3

现在它们的宽度相同，但高度不同。为什么？？？
这是我使用的代码：

html:

    <div class="row">
        <div class="column">
            <a href="Ananasfrucht (1g).JPG" data-lightbox="1-Ananas" data-title="nach ca. 3 Jahren ist der Fruchtansatz erkennbar (nach 1 Woche)">
                <img src="Ananasfrucht (1g).JPG" alt="Ananasfrucht" style="width: 100%">                    
            </a>
        </div>
        <div class="column">
            <a href="Ananasfrucht (2g).JPG" data-lightbox="1-Ananas" data-title="nach ca. 3 Jahren ist der Fruchtansatz erkennbar (nach 1 Woche)">
                <img src="Ananasfrucht (2g).JPG" alt="Ananasfrucht" style="width: 100%">
            </a>
        </div>
    </div>

css:

.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 5px;
}

Answer 4

我可以想到两种方法来做到这一点。

第一种方法是创建一个

，并在其中放置两个 标签，然后相应地自定义图像的大小。 查看此 CodePen。（我随机挑选了在 Google 上找到的照片。）

第二种方法是是创建两个 div [在父容器下] 并将所需的图像设置为它们的背景图像。 请参阅其他 CodePen。

我个人更喜欢使用图像标签，以便可以调整图像大小快速并根据需要。在我看来，必须调整大小并避免重复 div 的背景图像会有点压力，但当然这一切都取决于您想要在网站上实现的目标。