CSS easily implements fixed-ratio block-level containers

When designing H5 layout, you will usually encounter banners.

For example, if you want to display it as 2:1, of course the picture returned by the backend should be 2:1, but things are often not so satisfactory, so what should we do?

It always feels inappropriate to write the width and height in a fixed way

Default width: 100%; let the height be adaptive and the image will slowly expand (the product manager will say that this is a bad user experience, but I am a user and I think it is good)

The method is here

        .banner-wrapper {
            position: relative;
            width: 100%;
            padding-top: 50%;
        }

        .banner {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        
        <div class="banner-wrapper">
            <img class="banner" src="./img/portfolio/cabin.png" alt="">
        </div>

Let me explain

padding-top: 50%; is the key. Using percentages to write padding is relative to its width (don’t ask me why this is the case).

So width: 100%; padding-top: 50%; will perfectly present a 2:1 box

Finally, put the entire img on

Don’t you think it’s very simple to use after finishing the work?

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.