css - 以相同高度放置横向和纵向图像

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%;
}

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

Answer 1

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

你可以使用:

.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>