css - 使用flexbox调整图片高度

Question

我正在尝试构建一个包含两行的布局。下一行包含图像，这些图像应适应可用高度。

问题是，图像改变了它们的高度，但宽度却很奇怪。即使我设置了 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 像素时出现。

Answer 1

我认为你应该从图像中删除 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>