面试官:实现一下宽高固定比例叭。

·  阅读 50

可能大家看到这个问题,第一反应就是使用js获取元素的宽度或高度,事件监听元素尺寸大小变化时,设置宽高的比例。
但是秉承着能用css解决的就不要用js。那么我们可以用元素的padding-top或padding-bottom来实现。

<style>
        #container {
            width: 50vw;
        }

        #box {
            padding-bottom: 50%;
            background: red;
        }
        
</style>
    
    <div id="container">
        <div id="box"></div>
    </div>
复制代码

image.png

当盒子resize时,宽高固定比例为2:1。


记录记录!

分类:
前端
标签: