Image overflowing when using flexbox

Question

The problem I'm having is that the image height will not stay in its container's boundaries.

The the max-width being applied to the image seems to work, however, the max-height doesn't.

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%;
}

Any ideas on how to fix this would be much appreciated.

Please post the full code (including the images), so we can see the problem. — Michael Benjamin, May 17 '16 at 15:00
`flex-basis:0` makes no sense. You're just asking it to take 0 width. — agdhruv, May 17 '16 at 16:05
I put your code in a codepen and it seems to work okay: http://codepen.io/anon/pen/Ramxeo — Johannes, May 17 '16 at 16:15
I don't want the image to exceed the 'artist-image' div. I want it to sit in the div, with the whole image showing, regardless of the images dimensions. — 2K01B5, May 17 '16 at 16:25
Does anyone know why the 'max-height' property on the image doesn't work? — 2K01B5, May 17 '16 at 17:22
The reason `max-height` isn't working on your image is because you're using a percentage value, without specifying a height on the parent: http://stackoverflow.com/a/31728799/3597276 — Michael Benjamin, May 17 '16 at 17:27

Johannes · Answer 1 · 2016-05-17T17:23:51.517

NEW (CHANGED) ANSWER:

Define the images as background-images of their containers, center those and choose background-size: contain. This will always show the full image in its original proportions, fitted to the size of the container:

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

Here's the whole thing in a codepen: http://codepen.io/anon/pen/EKzQbK

Image overflowing when using flexbox

1 Answers1