如何以9:16的宽高比计算div的宽度和高度

Question

如何创建纵横比为9:16的div。我有一些16:9的示例，但是当我尝试计算9:16的长宽比时，div的高度太长了。

如何计算9:16可以适合任何类型的视口的div长宽比。

Answer 1

要保持长宽比不变，请确保宽度和高度使用相同的单位。您还应该使用基于用户视口尺寸的适当单位。例如，使用vw单位：

.my-9-16-aspect-ratio {
    width: 9vw;
    height: 16vw;

    border: 2px solid red;
}

<div class="my-9-16-aspect-ratio"></div>

然后您可以根据需要向上或向下缩放这些数字。

您还可以将css calc()函数与css变量一起使用，以避免像这样手动计算高度：

.my-9-16-aspect-ratio {
    --width: 95vw;
    width: var(--width);
    height: calc((16/9) * var(--width));

    border: 2px solid red;
}

<div class="my-9-16-aspect-ratio"></div>