How to keep the image inside the footer while the browser is zoomed out-CodePudding

I have created the layout using the flexbox. I have an image and some text in the footer. But when I am zooming out or in the browser to check for responsiveness the image in the footer is going out.

This is what happens when the browser window size is decreased.

 * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        padding: 0;
        font-family: "Lato", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -moz-font-feature-settings: "liga" on;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }


    .container {
        display: flex;
        height: 100vh;
    }

    .sidebar {
        flex: 1;
    }

    .content {
        -webkit-flex: 5;
        flex: 5;
        background-color: lightblue;
    }

    .main {
        padding: 1rem;
        height: 70vh;
        background-color: #ececec;
        overflow-y: scroll;
    }

    .header,
    .footer {
        display: flex;
        align-items: center;
        height: 15vh;
    }

    header,
    footer,
    article,
    nav,
    aside {
        padding: 1em;
    }

    .player {
        border: 1px solid red;
    }

    .player {
        display: flex;
        align-items: center;
    }

    .album__cover>img {
        width: 3.5rem;
        height: 3.5rem;
    }

    .album__cover {
        display: flex;
        align-items: center;
        margin-right: 1rem;
    }

    .playing__track {
        display: flex;
        flex-direction: column;
    }

    .playing__album {

        display: flex;
        align-items: center;
    }

    .album {
        font-size: .875rem;
        font-weight: 300;
    }

    .track {
        font-size: .75rem;
    }

<link
    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
    rel="stylesheet">


<body>
    <div >

        <nav >
            <a>Logo Goes Here</a>
        </nav>
        <div >
            <header >Header</header>
            <main >
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis auctor sem, vitae
                    scelerisque eros feugiat non. Mauris sit amet arcu sed ligula pellentesque tempus non imperdiet
                    elit. Aliquam dapibus metus ac odio facilisis, vitae bibendum quam lacinia. Phasellus a ante ut
                    justo dictum bibendum et ut massa. Etiam hendrerit sapien venenatis lacinia sodales. In et massa
                    leo. Integer imperdiet orci ac scelerisque malesuada. Donec mattis velit nec elit tincidunt mattis.
                    Proin vel varius felis, vel scelerisque mauris. Nunc malesuada purus velit, eu euismod tellus
                    consectetur et.
                </p>
                <p>
                    Quisque tincidunt nisi non dolor porttitor maximus. Donec tempus auctor leo vitae maximus. Sed
                    mattis nibh velit, iaculis molestie massa tempus vitae. Aliquam ipsum sem, ornare condimentum magna
                    vitae, auctor sagittis odio. Duis ut urna vel est luctus suscipit. Suspendisse at aliquet metus, in
                    rhoncus ligula. Aliquam erat volutpat. Nullam ultricies elit vel eros convallis, ut suscipit erat
                    mattis. In hac habitasse platea dictumst.
                </p>
                <p>
                    Ut enim diam, auctor eu turpis non, egestas accumsan dui. Suspendisse vel lorem tempor, imperdiet
                    purus vel, tincidunt turpis. Praesent sit amet lacus vel enim iaculis egestas vitae eget nibh. Donec
                    consequat placerat odio, in laoreet magna pretium ac. Curabitur porttitor a elit sed scelerisque.
                    Curabitur laoreet eu nisi ac ornare. Cras ornare, metus ut vestibulum rhoncus, purus arcu lobortis
                    odio, ac iaculis urna mi ut ex. Maecenas vitae dolor non felis rhoncus imperdiet a vitae enim.
                    Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur eget condimentum dolor. Duis
                    lacinia libero quis lacinia lacinia. Ut pretium pulvinar vestibulum. Ut blandit eget tellus sit amet
                    ornare.
                </p>
            </main>
            <footer >
                <div >
                    <div >
                        <div >
                            <img src="https://images.pexels.com/photos/1051838/pexels-photo-1051838.jpeg?cs=srgb&dl=pexels-prasanth-inturi-1051838.jpg" />
                        </div>
                        <div >
                            <div >
                                Last and the first freedom
                            </div>
                            <div >
                                <span> Chapter 1</span>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>

</body>

How can I keep the image precisely inside the footer with the same padding and orientation?

CodePudding user response：

You need to get rid of the fixed height and control the image it's width and height if you want the footer to be either bigger of smaller.

This is the solution

.header, .footer {
    display: flex;
    align-items: center;
    /* height: 15vh; */
    background-color: lightblue;
}

CodePudding user response：

I think the issue is the units used for the padding, image size and font size. If you try using the vh unit instead of the rem unit, you might hav success.

.album__cover>img {
width: 3.5rem;
height: 3.5rem;
}
footer {
height: 10vh;
}
.album, 
.track {
.album {
font-size: 0.875rem;
}