DIV固定宽高比

实际开发中,可能遇到这样一种奇怪的需求:要求一个包裹在父元素中的<div>保持一个固定的宽高比,比如固定宽高比为3:1

CSS实现

实际上,这种情况不需要用JavaScript来手动计算,CSS可以实现。下面是一个例子:

<div class="container">
    <div class="app"></div>
</div>
.container {
    width: 30%;
    height: 300px;
    border: 1px solid #cbcbcb;
}

.app {
    width: 100%;
    padding-top: 30%;
    background-color: red;
}

大家可能会很惊讶,padding-top为什么会根据宽度而不是高度来计算呢?但事实就是这样。

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap