使用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，除非可用高度较小，否则图像应缩小，但长宽比应保持不变。我认为仅在调整窗口大小以使图像的高度小于400px时才会出现问题。

Answer 1

我认为您应该从图像中删除flexbox，并默认将它们设置为inline并使用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>

Answer 2

.flexContainer{
    display: flex;
     flex-direction: column;
}
 ul{
    list-style: none;
     column-count: 3;
     margin: 0;
     padding: 0;
}
 .top{
    background: red;
     color: white;
     font-size: 1.4rem;
     padding: 1em;
     padding-bottom: 1em;
     padding-bottom: 2em;
     flex: 2 0 auto;
}
 .bottom{
     background: blue;
     display: flex;
     justify-content: space-between;
}
 .bottom > div:nth-child(2){
    margin: 0 1rem;
}
 .bottom img{
     max-width: 100%; vertical-align: top; 
}

<div class="flexContainer">
    <div class="top">
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
            <li>six</li>
            <li>seven</li>
            <li>eight</li>
            <li>nine</li>
        </ul>
    </div>
    <div class="bottom">
        <div><img src="https://picsum.photos/g/600?random"></div>
        <div><img src="https://picsum.photos/600"></div>
        <div><img src="https://picsum.photos/600?random"></div>
    </div>
</div>

Answer 3

您可以用div包裹每个IMG。 然后将div高度设置为400px 并将img最大高度设置为100％

.img-wrapper { 高度：400px }

.img-wrapper img { 最大高度：100％ }