我正在尝试构建一个包含两行的布局。下一行包含图像,这些图像应适应可用高度。
问题是,图像改变了它们的高度,但宽度却很奇怪。即使我设置了 height: 100%
和 width: auto
。
我为此做了一个简化的笔:https://codepen.io/oliverspies/pen/zaeVRw
.flexContainer {
display: flex;
flex-direction: column;
height: 100vh;
}
.bottom {
flex: 0 2 25rem;
height: 100%;
max-height: 25rem;
display: flex;
justify-items: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.bottom img {
height: 100%;
width: auto;
display: block;
margin-right: 1rem;
}
<div class="flexContainer">
<div class="top">
Content
</div>
<div class="bottom">
<img src="https://picsum.photos/g/600?random">
<img src="https://picsum.photos/600">
<img src="https://picsum.photos/600?random">
</div>
</div>
所以我最终想要实现的是图像高度为 400px,除非可用高度更小,否则图像应该缩小,但宽高比应保持不变。我认为问题只会在调整窗口大小时使图像高度小于 400 像素时出现。
最佳答案
我认为你应该从图像中删除 flexbox,让它们默认内联并使用 max-height: 100%:
.flexContainer{
display: flex;
flex-direction: column;
height: 100vh;
}
.bottom{
flex: 0 2 25rem;
height: 100%;
max-height: 25rem;
}
.bottom img{
max-height: 100%;
margin-right: 1rem;
}
<div class="flexContainer">
<div class="top">
Content
</div>
<div class="bottom">
<img src="https://picsum.photos/g/600?random">
<img src="https://picsum.photos/600">
<img src="https://picsum.photos/600?random">
</div>
</div>
关于css - 使用flexbox调整图片高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51133447/