Auto-resize image in flex item

Question

I have the following html :

<div class="main-container">
    <h1>A title</h1>
    <p>Some text</p>
    <div class="sub-container">
        <img src="">
    </div>
</div>

With the following CSS :

.main-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sub-container{
    flex-grow:2;
    background-color: green;
}

Please note that I don't know the size of the container above "main-container". I'm using flex because I want the div in "main-container" to occupy all the remaining space at the bottom.

What I want is to have an image in "sub-container" which fits its parent's size in both directions (height and width). Right now if I add an image into "sub-container" it overflows and doesn't get scaled at all. I know that flex only works for immediate children (i.e. "sub-container" but not the image inside). I tried to use flex on "sub-container" too, but I couldn't achieve anything satisfactory.

I'm sure this will help you here - [css image resizing](http://stackoverflow.com/questions/39289576/css-image-resize-issue/39289947#39289947) — kukkuz, Oct 27 '16 at 08:55
@kukkuz the problem here is "he didn't know the width and height since he is using flex-grow" - c#m — hdotluna, Oct 27 '16 at 08:58
@HermLuna it doesn't matter if the container changes dimensions dynamically - it is how you fit the image inside and how you handle the overflow... Maybe OP need to consider `object-fit: contain` I guess... — kukkuz, Oct 27 '16 at 09:04
@kukkuz I think he wanted to make the image fits exactly to the container. I don't know if css can. I'm not sure tho. — hdotluna, Oct 27 '16 at 09:07
@HermLuna Yes, OP can't fit it exactly to the container unless he breaks the `aspect-ratio` - OP needs to consider [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) :) — kukkuz, Oct 27 '16 at 09:11
@kukkuz nice. I should learn this also :D Thanks for information. — hdotluna, Oct 27 '16 at 09:16

score 3 · Answer 1 · answered Nov 13 '20 at 02:13

Is this layout you wanted?

Using flex: 1 1 0 to control the sub-container and using width: 100% could make the image to fit the container.

.main-container{
  border: 3px solid green;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sub-container{
    flex-grow: 1 1 0;
    background-color: green;
    display: flex;
}

.sub-container img {
   width: 100%;
   height: 100%;
}

<div class="main-container">
    <h1>A title</h1>
    <p>Some text</p>
    <div class="sub-container">
        <img src="https://picsum.photos/1080/600">
    </div>
</div>

score 0 · Answer 2 · answered Oct 27 '16 at 08:39

0

You can use this class:

.img-fluid {
    max-height:100%;
    height:auto;
}

Don't forget to add .img-fluid to your img

answered Oct 27 '16 at 08:39

Mattonit

601
7
22

4

What I need is something to scale in both directions. Your solution takes care of the width, but if the image is higher than wide it will overflow. – GuitarExtended Oct 27 '16 at 09:03

Auto-resize image in flex item

2 Answers2

Linked