Question

我遇到的问题是图像高度不会停留在容器的边界。

应用于图像的最大宽度似乎有效，但是，最大高度不会。

HTML

<div class="row-layout">
  <div class="artist-image">
    <img >
  </div>
  <div class="artist-image">
    <img >
  </div>
  <div class="artist-image">
    <img >
  </div>
</div>

CSS

.row-layout {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 250px;
 }
.artist-image {
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}
.artist-image > img {
   max-width: 100%;
   max-height: 100%;
}

如何解决这个问题的任何想法都将非常感激。

Answer 1

新（已更改）答案：

将图像定义为其容器的背景图像，将其置于中心位置并选择background-size: contain。这将始终以原始比例显示完整图像，符合容器的大小：

.x {
  background: url(http://placehold.it/600x400) center center no-repeat;
  background-size: contain;
}

以下是codepen中的全部内容：http://codepen.io/anon/pen/EKzQbK

使用flexbox

1 个答案: