使用flexbox调整图像高度

时间:2018-07-02 09:54:36

标签: css flexbox

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

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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

答案 2 :(得分:-1)

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

.img-wrapper { 高度:400px }

.img-wrapper img { 最大高度:100% }