美文网首页
怎么实现div长宽比固定width: height = 4: 3

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

作者: Small_Song | 来源:发表于2021-01-20 09:02 被阅读0次

    方式一

            .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>
    

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/exezgktx.html