Fit image on screen CSS

Question

I want all of this sample HTML structure to fit 1 screen without scrolling, the image has to resize appropriately. But there is still scrolling.

<div style="position: fixed; top:0;left:0;width:100vw;height:100vh;background:red;z-index:100000;display:flex;flex-direction:column">
    <div style="background:green">aaa</div>
    <div style="flex-grow:1">
        <img src="https://placehold.co/3200x3200" style="width: 100%; height: 100%; object-fit: contain;">
    </div>
    <div style="background:blue">bbb</div>
</div>

This seems to work when copying your code directly into a Stack Overflow snippet? Is there other styling in you application? Or a different browser being used? — Harrison, Aug 07 '23 at 08:43
No, it doesn't - add overflow:auto to the container div and you will see that it is scrolling vertically. — bolshas, Aug 07 '23 at 08:55
I did say that that copying _directly_ the code worked, in that case `overflow: auto` should be in the code/snippet as it is vital to your issue. — Harrison, Aug 07 '23 at 09:52
My goal is not the scrolling but to actually fit the whole content on the screen. I just mentioned the overflow:auto to demonstrate that the full content is not visible — bolshas, Aug 07 '23 at 11:04

Paradonix · Accepted Answer · 2023-08-07T09:51:31.510

1

Your div wrapped around your image doesn't have a set height and matches the height of your image. This results in the image being bigger than the screen. Try giving the div a height of 100%. This will match its parents height, which is the screen height.

Here's an example:

<div style="position: fixed; top:0;left:0;width:100vw;height:100vh;background:red;z-index:100000;display:flex;flex-direction:column">
    <div style="background:green">aaa</div>
    <div style="display:flex;flex-grow:1;height:100%;overflow:auto;">
        <img src="https://placehold.co/3200x3200" style="width: 100%; height: 100%; object-fit: contain;">
    </div>
    <div style="background:blue">bbb</div>
</div>

Is this what you were looking for?

edited Aug 07 '23 at 09:51

answered Aug 07 '23 at 08:58

Paradonix

78
9

the blue bar with content "bbb" is not visible in your solution. – bolshas Aug 07 '23 at 09:09
Updated the code. You can add display:flex; and overflow: auto to your image div to make the image the full height without pushing any other content out of the screen. – Paradonix Aug 07 '23 at 09:52
Perfect! overflow:auto on the container div of the img did the trick. – bolshas Aug 07 '23 at 11:30

score 0 · Answer 2 · answered Aug 07 '23 at 09:55

You could use absolute positioning on your image to make sure it fills the parent div. Also, I would change your object fit to cover rather than contain, otherwise it won't fill the full area unless the area and the image have the same aspect ratio (if you're not bothered about that, then you can leave it as contain).

<div style="position: fixed; top:0;left:0;width:100vw;height:100vh;background:red;z-index:100000;display:flex;flex-direction:column">
    <div style="background:green">aaa</div>
    <div style="flex-grow:1; position:relative;">
        <img src="https://placehold.co/3200x3200" style="object-fit: cover; position:absolute; top: 0; left:0; width: 100%; height: 100%;">
    </div>
    <div style="background:blue">bbb</div>
</div>

Fit image on screen CSS

2 Answers2