CODEWITHSUNDEEP
javascripthtmlcssflexbox
lhk
lhk

Reputation: 30076

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

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:

object-fit

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: max-height

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:

Upvotes: 1

Views: 3715

Answers (4)

BVoort
BVoort

Reputation: 46

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 :)!

Upvotes: 2

StepUp
StepUp

Reputation: 38124

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>

Upvotes: 0

ates_irem
ates_irem

Reputation: 286

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

Upvotes: 0

Mr. Hedgehog
Mr. Hedgehog

Reputation: 2885

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.

Upvotes: 0

Related Questions