CSS DIV and IMG position & sizing keeping proportion-CodePudding

I am trying to create a page that will have two divs (technically 3 as one is the wrapper). One at the top covering 8% of the screen we will call topdiv. And one on the bottom covering 92% of the screen we will call bottomdiv. Topdiv will hold text only. Bottomdiv will have an image. I would like the image to fill the bottomdiv at least vertically but not overflow/extend beyond the screen vertically or horizontally and keep its proportion. The images may need to stretch to be bigger or shrink to be smaller, both are possible. This will be for a fullscreen app so scrolling is not an option.

What I have now mostly works except that the image is too large and expands beyond the edges.

I have tried object-fit contain and others, no luck.

My current code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Super Site</title>
    </head>
    <body style="margin: 0; padding: 0; border-width: 0; overflow:hidden;">
        <div id="wrapper" style="position: relative; height: 100vh; background-color: yellow;">
            <div style="position: absolute; left: 0; right: 0; top: 0; height: 8%; background-color: red;">
                <center><h1>An awesome quote will go here!</h1></center>
            </div>
            <div style="position: absolute; left: 0; right: 0; bottom: 0; top: 8%; height: 92%; background-color: purple;">
                <img src='1.jpg' style='object-fit: cover; width: 100%; height: 100%;'>
            </div>
        </div>
    </body>
    </html>

Can anyone help? Thanks :)

CodePudding user response：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Super Site</title>
</head>
<body style="margin: 0; padding: 0; border-width: 0; overflow:hidden;">
    <div id="wrapper" style="position: relative; height: 100vh; background-color: yellow;">
        <div style="position: absolute; left: 0; right: 0; top: 0; height: 8%; background-color: red;">
            <center>
                <h1>An awesome quote will go here!</h1>
            </center>
        </div>
        <div style="position: absolute;left: 0;right: 0;bottom: 0;top: 8%;height: 92%;background-color: purple;display: flex;justify-content: center;align-items: center;">
            <img src="1.jpg" style="min-height: 100%;max-width: 100%;object-fit: contain;max-height: 100%;">
        </div>
    </div>
</body>
</html>

Was almost there. Rather than setting the width and height of the img, use max-width, max-height, and min-height. This way the image will scale to fit height, but proportionally stay within the div without going beyond the bounds. Using the justifying and aligning of display:flex on the parent div also ensures the img element stays within the center of the div.

CodePudding user response：

You need to use the justify-content: center and for the second div use max-width and max-height

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Super Site</title>
</head>
<body style="margin: 0; padding: 0; border-width: 0; overflow:hidden;">
    <div id="wrapper" style="position: relative; height: 100vh; background-color: yellow;">
     <div style="position: absolute; left: 0; right: 0; top: 0; height: 8%; background-color: red; display: flex; align-items: center; justify-content: center;">
    <h1>An awesome quote will go here!</h1>
</div>
        <div style="position: absolute; left: 0; right: 0; bottom: 0; top: 8%; height: 92%; background-color: purple;">
            <img src='https://www.google.com.tw/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'  style='margin: auto; display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; object-fit: contain;'>
        </div>
    </div>
</body>
</html>```