CSS Flexbox: fit large image to screen

Once again, vertical sizing bites me in CSS. It seems easy, but I just cannot get it right.

I’m trying to make a simple fullscreen app that splits the screen in three panels:

  • the sidebar
  • the details header
  • the details image

I can get the layout right, with flexbox, as long as the image isn’t in there.

However, adding the image breaks the layout, and I can’t find a way to force the image to fit inside the screen. It’s going to be a large image, full res from a pro camera. It can be either landscape or portrait. It’s garanteed to not fit the screen and have to be resized.

Here’s my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
        <div id="sidebar">Sidebar</div>
        <div id="main">
            <div id="main_header">Main header</div>
            <div id="main_contents">
                <img src="https://placehold.co/2000x3000" alt="">
            </div>
        </div>
    </main>
    <style>
        body {
            margin: 0;
        }

        main {
            display: flex;
            flex-direction: row;
            height: 100vh;
            width: 100vw;
            max-height: 100vh;
            max-width: 100vw;
        }

        #sidebar {
            background-color: tomato;
            width: 330px;
        }

        #main {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        #main_header {
            background-color: aqua;
        }

        #main_contents {
            background-color: burlywood;
            flex: 1;
        }

        #main_contents img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</body>
</html>

If you remove the img tag, or make the image smaller, everything is fine, and fits within the visible screen.

But with a large image, at least on Safari, it breaks the layout and overflows to the bottom. Scrollbars appear.

How can I fix this?

>Solution :

It seems like you want to create a layout with three panels: a sidebar, a header, and an image in the main content area. You want the image to fit within the available space and be responsive. However, when you add a large image, it breaks the layout.

To achieve this layout with a responsive image, you need to make a few adjustments. Here’s an updated version of your code:

HTML CODE :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* Prevent scrollbars when the image is too large */
        }

        main {
            display: flex;
            height: 100vh;
        }

        #sidebar {
            background-color: tomato;
            width: 330px;
        }

        #main {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        #main_header {
            background-color: aqua;
        }

        #main_contents {
            background-color: burlywood;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden; /* Prevent the image from overflowing */
        }

        #main_contents img {
            flex: 1; /* Allow the image to take up all available space */
            object-fit: contain; /* Maintain aspect ratio and fit within the container */
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
    <main>
        <div id="sidebar">Sidebar</div>
        <div id="main">
            <div id="main_header">Main header</div>
            <div id="main_contents">
                <img src="https://placehold.co/2000x3000" alt="">
            </div>
        </div>
    </main>
</body>
</html>

They main stuff I changed :

Added overflow: hidden; to the body to prevent scrollbars when the image is too large.

Applied object-fit: contain; to the #main_contents img element to make the image fit within the container while maintaining its aspect ratio.

Set flex: 1; for both #main_contents and #main_contents img to allow them to take up all available vertical space.

With these adjustments, the image should fit within the main content area without breaking the layout, and it will be responsive to different screen sizes.

Leave a Reply