Scale image to max size in a flexbox

Question

I have a flexbox with a couple of flexbox items which have a width of about 50%. A flexbox item either contains one or more <p> elements or a single <img />.

The flexbox items with an image should be completely filled with the image, without it being set as the background of the surounding div.The images always seem to have a small red bar below, even if the image fills the entire width. How can I make the image fill the entire flexbox item?

It does not matter if the aspect ratio of the image changes.

I don't just want the empty space below the image gone. I want it to strech out to use the full width of the flexbox item as well. So it fills the flexbox item.

.container {
  width: 500px;
}
.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex-item {
  border: 1px solid black;
  background: red;
  margin: 25px 0;
  width: 47%;
  flex-basis: 47%;
}
img {
  max-width: 100%;
  background: white;
}

<div class="container flexbox">
  <div class="flex-item">
    <p>It should work with a big image</p>
  </div>
  <div class="flex-item">
    <img src="http://goo.gl/6EO4mj" />
  </div>
  <div class="flex-item">
    <p>But also with a small one</p>
  </div>
  <div class="flex-item">
    <img src="http://goo.gl/nxXSMO" />
  </div>
  <div>

EDIT: Added emphasis. Added more explaination.

It doesn't seem like you've actually *tried* anything here. Yes, you have code, but I don't see any indication that you've tried making that image stretch or otherwise fill the container. — cimmanon, Oct 17 '15 at 12:54
@cimmanon I have tried several display modes. Using a higher max-width. Inheriting the width from the parent div. I just cannot get it to work properly. — Simon, Oct 17 '15 at 13:22
Alternate duplicate: http://stackoverflow.com/questions/16501668/stretch-image-to-fit-100-of-div-height-and-width — cimmanon, Oct 17 '15 at 13:45
@cimmanon Yes because setting the width to a constant would be a great idea if it would not break when anything in its surounding changes size. — Simon, Oct 17 '15 at 13:48
Did you read *all* of the answers or just half of the first one? — cimmanon, Oct 17 '15 at 13:53
@cimmanon Jesus.. I tried width 100% before so I didn't bother with trying it again but now I see that I had a typo in that part of the css.. Thanks for staying stubborn man, because you actually helped me find my mistake. — Simon, Oct 17 '15 at 14:04

maioman · Answer 1 · 2015-10-11T15:17:06.420

adding display:block to img :

.container {
  width: 500px;
}
.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex-item {
  border: 1px solid black;
  background: red;
  margin: 25px 0;
  width: 47%;
  flex-basis: 47%;
}
img {
  max-width: 100%;
  background: white;
  display :block
}

<div class="container flexbox">
  <div class="flex-item">
    <p>It should work with a big image</p>
  </div>
  <div class="flex-item">
    <img src="http://goo.gl/6EO4mj" />
  </div>
  <div class="flex-item">
    <p>But also with a small one</p>
  </div>
  <div class="flex-item">
    <img src="http://goo.gl/nxXSMO" />
  </div>
  <div>

Explanation: the img by default is displayed inline and vertical-align:baseline , the space you're seeing is the space under the baseline.

you could also change vertical alignment to middle;

Scale image to max size in a flexbox

1 Answers1