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>

因此，在我的小提琴示例中，风景图片超出了肖像图像的高度。情况并非如此。横向图像的高度应与纵向图像相同，其余部分将在右侧和底部溢出，将被遮盖。最后，最好的情况是如果景观图像被屏蔽掉并且也在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发送宽度

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

1 个答案: