2张图片以相同的高度填充全宽

Question

的Bonjour，

我有两张照片，我想并排显示这些照片 我希望它们能够填充容器的整个宽度并具有相同的高度。

你知道怎么做吗？ 我想保留图像比例 绿框代表我的容器（可能是一些 div ）

提前致谢。

Answer 1

使用max-height并为其指定值 - 与图像max-height: minimum-image-height(from both images)相比的最小高度值。

请看下面的代码段：

.image {
  max-height: 200px;
}

<div class="box">
  <img src="http://placehold.it/200x200" alt="" class="image" />
  <img src="http://placehold.it/300x600" alt="" class="image" />
</div>

希望这有帮助！

Answer 2

以下是使用flex：（http://codepen.io/dpes/pen/MbeBbd）

的codepen和snippet

＆＃13;

＆＃13;

.flex-container{
  display:flex;
  align-items: flex-start;
}
.flex-container img {
    object-fit: contain;
     max-height: 300px;
     min-height: 300px;
}

＆＃13;

<div class="flex-container">
   <img src="http://lorempixel.com/400/500/">
   <img src="http://lorempixel.com/500/400/">
</div>

＆＃13;

＆＃13;

＆＃13;