1 行 2 张图像；将 1 个图像设置为另一个图像的高度父级

Question

我在 Stackoverflow 上尝试了一些答案，但到目前为止似乎都不起作用，或者我没有得到它的工作。因此，如果您对我的问题有以下答案，或者您可以在网站上为我指出正确答案，我将不胜感激。

我遇到以下问题：

设置：

• 1 行有 2 张图像。 1 张图片为纵向，1 张为横向 图片。
• 宽度设置如下：纵向 28% / 边距 2% / 横向 70% = 总宽度 100%。
• 图像设置为最大宽度：100%，因此两个图像都将覆盖整个空间。

但是，当然图像的高度会有所不同。我想要的是：

- 纵向图像： 纵向图像应始终以 100% 的宽度和高度显示（在给定的空间内，在我的情况下为 28% 的宽度）。

- 横向图像： 横向图像的高度应与纵向图像的高度相同，当图像本身较大时也是如此。基本上，纵向 div 是横向 div 的父级，并设置整行的高度。如果图像本身的一部分高度大于纵向图像，则横向图像将被遮盖。

这是我的设置： https://jsfiddle.net/7bsjg7dq/

<div class="wrap">

<div class="item1"><img src="http://www.wouterpasman.com/test/tree-portrait.jpg"></div>
<div class="item2"><img src="http://www.wouterpasman.com/test/tree-landscape.jpg"></div>

</div>

所以在我的 Fiddle 示例中，横向图片超出了纵向图片的高度。这不应该是这样。横向图像的高度应与纵向图像相同，右侧和底部溢出的其余部分将被屏蔽。最后，最好的情况是横向图像被遮盖并在 div 内居中。

提前致谢！

Answer 1

如果图像比例始终相同，您可以查看 display:table + table-layout:fixed，调整容器大小和仅一个单元格。

img {
  width: 100%;
  display: block;
}
.wrap {
  display: table;
  width: 100%;
  table-layout: fixed;
  background: red;
}
.item1,
.item2 {
  display: table-cell;
}
.item2 {
  width: 67.2%;
}
.item1 {
  padding-right: 2%;
}

<div class="wrap">
  <div class="item1">
    <img src="http://www.wouterpasman.com/test/tree-portrait.jpg">
  </div>
  <div class="item2">
    <img src="http://www.wouterpasman.com/test/tree-landscape.jpg">
  </div>

</div>

https://jsfiddle.net/7bsjg7dq/2/ 或https://jsfiddle.net/7bsjg7dq/3/ width 而不是max-width

---

如果每个图像的比例相同，您也可以将宽度分配给图像https://jsfiddle.net/7bsjg7dq/4