将横向和纵向图像放置在相同高度

Question

如何使横向和纵向图像在一个 div 中彼此相邻保持相同的高度？ 我在这里做了一个粗略的草图： showing the desired layout

这是我尝试过的代码：

HTML

<div class="image-wrapper">
  <div class="image">
    <img src="http://placekitten.com/400/600" />
    </div>
    <div class="image">
    <img src="http://placekitten.com/600/400" />
    </div>
</div>

CSS

.image-wrapper {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: center;
  flex-direction: row;
  box-sizing: border-box;
  max-height: 700px;
  background-color: yellow;
}

.image {
  background-color: red;
}

.image:first-of-type {
  margin-right: 1rem;
}

img {
  max-height: 100%;
  max-width: 100%;
}

这是一个小提琴：http://jsfiddle.net/8xaqjp6k/18/ 奇怪的是，我的代码，不是小提琴在 Safari 中工作得很好，但在 Chrome 或 Firefox 中却不行

Answer 1

老实说，我不确定您是否希望整个图片的高度相同，或者只是让两者的红色框都达到 700 像素的高度。无论哪种方式，尝试将您的图像包装器更改为：

.image-wrapper {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: center;
  flex-direction: row;
  box-sizing: border-box;
  min-height: 700px;
  background-color: yellow;
}

如果您需要进一步的帮助，请告诉我。另外，如果只是你想要相同大小的图像而不是红色框，我建议通过调整图像大小来做到这一点，通过 css 调整图像大小并不理想并且会导致性能问题。

Answer 2

最简单的方法是使用max-height。您要做的其他事情是 1，使用背景图像，然后使用 padding: x% 设置高度或设置一个环绕您的图像的容器，然后隐藏溢出。

你可以使用：

.image img { max-height:285px } 

或者使用背景图片：

.image {
   height:0px;
   padding-bottom: 100%;
   overflow: hidden;
   background-size: cover;
   background-position: center;
 }

 <div class="image" style="background-image:url('/img/my-image.jpg')"></div>