1

This is the demo of my problem.

And this is the outline of my HTML:

<div class="container">
  <div class="f1">
    TITLE
  </div>
  <div class="f2">
    <div class="f2-child">
      <img/>
    </div>
  </div>
</div>

Basically it's a flex container which contains two flex items. The first flex item(f1) is the title, which takes up some fixed height. And the second flex item(f2) fill the rest of the height. So far so good.

And I put another flex container(f2-child) inside of f2, just to create some margin space. And I want an image to fit inside f2-child. The image should be as wide as f2-child, but its maximum height should be the same as f2-child.

It works fine when the viewport's width is low, but when the width gets higher, the image would overflow. I tried setting f2 and f2-child's max-height to 100%, but it does not work.

squiiiid
  • 93
  • 7

3 Answers3

1

I've figured out myself by learning more about how flexbox works. This is my final outcome: codepen link. I use tailwind so you need to know a little bit about it.

Now my layout looks like this:

<div class="container">
  <div class="f1">
    TITLE
  </div>
  <div class="f2">
    <img/>
  </div>
</div>

I removed f2-child from the last version.

The flex direction of the container is column, so after determining the height of f1, f2 would stretch itself. f2 is also a flex container, but with row flex direction. The image is its flex item.

Notice how f2 has multiple tailwind classes. flex items-center justify-center make sure image is horizontally and vertically aligned in f2.

And f2's grow-0 shrink-1 basis-auto h-full min-h-0 plus img's max-h-full make sure that when the view port is wider, the content won't overflow.

For more details you could see this post: Prevent flex items from overflowing a container

squiiiid
  • 93
  • 7
0

To solve the issue of the image overflowing, you can try setting the max-width property of the image to 100% and the width property to auto. This will ensure that the image's width is equal to the width of the parent container (f2-child) and its height is proportional to its width, preventing overflow.

You can also add overflow: hidden to the f2-child container to clip any content that exceeds its boundaries.

Here's the updated code:

<div class="container">
  <div class="f1">
    TITLE
  </div>
  <div class="f2">
    <div class="f2-child" style="overflow: hidden;">
      <img style="max-width: 100%; width: auto;" />
    </div>
  </div>
</div>
Esmaeil Mazahery
  • 344
  • 1
  • 7
  • Setting the image max-width:100% and width:auto doesn't seem to work. And weirdly, setting overflow: hidden to f2-child doesn't clip the image in my case. – squiiiid Feb 08 '23 at 05:18
0

Add the two tailwind classes h-full object-cover to your image tag. <img src="https://source.unsplash.com/04X1Yp9hNH8/1600x900" alt="img" class="w-full h-full object-cover"/>

Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
  • But in that case, my photo's ratio would change. I would like my photo to be the original ratio. And when the viewport gets wider, only f2-child gets wider, and the photo stays in the middle of f2-child – squiiiid Feb 08 '23 at 05:09