如何使横向和纵向图像在一个 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 中却不行
最佳答案
最简单的做法是使用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>
关于css - 以相同高度放置横向和纵向图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51789722/