css, contain an image within its parent div (within flexbox)

Question

I would like to use flexbox to display a series of images with a small caption. Each pair of image/text is contained in a div.
Each div should have a maximum height of at most 30vh. And the images should be scaled to fit in their respective div.

Well, it doesn't work. The image overflows its container.
This question is exceedingly common, and I will append a comprehensive list of related questions below.

I think the correct css for the desired layout should be this:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 30vh;
}
img {
  object-fit: contain;
}

For some reason, the image does not adhere to the object-fit setting. Here is a screenshot that documents the problem:

Here is a minimal reproducible example on jsfiddle: https://jsfiddle.net/17a8sj9o/9/

I've also tried setting max-height: 100%;. But this works only for some of the images. If you edit the jsfiddle, you'll see this:

Experimenting with max-height makes me think that this problem is some strange interplay between the flexbox layout and the image height.
There are many related questions, they invariably advocate a mixture of height, max-height and object-fit.
I've searched extensively but couldn't find a solution that solves my problem.
Here is a selection of related questions:

Contain an image within a div? uses max-height and max-width, with absolute px measures
Make an image width 100% of parent div, but not bigger than its own width uses max-width with a percentage
Img's max-height not respecting parent's dimensions uses a combination of max-height and attributes for positioning. Another answer mentions object-fit

I think you need to set `width:` and `height:` on `img`. Otherwise `object-fit` does not work. — Miu, Mar 10 '21 at 18:33

BVoort · Answer 1 · 2021-04-05T07:37:51.797

I saw your problem and remembered I had the same some time ago making a photoslide.

First of all it depends on the resolution of the images. Like 1920 x 1080 makes it a 16:9 image.

If you know what the aspect ratio of your image is then you can should make the container the same ratio. So if the image is 16:9 the container should be some amount pixels e.g. 2060 x (2060/16x9) = 1159 also in a 16:9 ratio. If not then I think you can't scale it properly.

I think if you then add the things you mentioned above like display: flex etc.. and add overflow: hidden, image-repeat: none. And add width: 100%, height: 100% to the image inside the container it works.

Not sure if it works, but hope you can get something out of it. If not, good luck :)!

score 0 · Answer 2 · answered Mar 10 '21 at 18:40

0

You need to set dimensions for your images. In your case max-height: 100% would be enoigh.

object-fit tells browser how to scale your image, but not tell it to actually scale it.

answered Mar 10 '21 at 18:40

Mr. Hedgehog

2,644
1
14
18

ates_irem · Answer 3 · 2021-03-10T18:55:39.927

If you use max-height: 30vh; or max-height: 100%; for the img I think it will work. When you use max-height: 100%; it will automatically fit in its parent element no matter how big the parent is.

.App {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 30vh;
}
img {
  max-height: 30vh;
    width: auto;
    object-fit: contain;
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

score 0 · Answer 4 · answered Mar 10 '21 at 19:25

It looks like align-items in container is a reason of overflowing. And set width and height of an image to 100%. So you can remove it and it prevents overflowing of an image:

.container {
  display: flex;
  flex-direction: row;
  max-height: 30vh;
  /* background-color: red; */
  justify-content: center;
}

img {
  max-width: 100%;
  max-height: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  /* background-color: lightgreen; */
}

<div class="App">
    <div class="container">
      <div>
        <img src="https://www.fillmurray.com/200/300"></img>
      </div>
    </div>
    <div class="row">
      <div class="container">
        <img src="https://www.fillmurray.com/200/300"></img>
        <p>test</p>
      </div>
      <div class="container">
        <img src="https://www.fillmurray.com/200/300"></img>
        <p>test</p>
      </div>
    </div>
  </div>

css, contain an image within its parent div (within flexbox)

4 Answers4