怎么实现div长宽比固定width: height = 4: 3

2021-01-20  本文已影响0人  Small_Song

方式一

        .cont{
            width: 300px;
            background-color: #00a0e9;
        }
        .cont:after{
            display: block;
            width: 100%;
            padding-top: 75%;
            content: '';
        }
<div class="cont">
    </div>

padding-top 和 padding-bottom百分比是基于父级的,可用添加伪类的方式,在伪类上设置padding-top、padding-bottom来实现,这种方式无论width怎么设置,都可实现固定长宽比。

方式二

        .cont1{
            width: 40vw;
            height: 30vw;
            background-color: #ff5555;
        }

    <div class="cont1">
    </div>

这种方式宽度和高度都是随屏幕宽度等比例变化的。

上一篇下一篇

猜你喜欢

热点阅读