如何实现一定宽高比的矩形

[scarcoco]

题目描述

如何实现一定宽高比的矩形？

方法一

巧用 padding 实现一定宽高比的矩形。 原理：margin 和 padding 的百分数值都是相对于父元素内容区的宽度。

<style>
    .container {
        width: 100px;
    }
    .element {
        position: relative;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        padding-top: 75%;
    }
</style>

<div class="container">
    <div class="element"></div>
</div>

方法二

CSS 新增了两个单位 vw、vh，如果知道元素撑满（100vw）或者大概能估算 vw 宽度，则可以直接设置 height=75vw 或者宽度乘以百分比即可。