有没有办法找到div的大小和宽度的比率答案

【问题标题】：is there a way to find ratio for size and width of div有没有办法找到div的大小和宽度的比率
【发布时间】：2022-11-23 12:00:23
【问题描述】：

我有两个 sass 变量用于某个 div 的宽度和高度：

$width: 277.98px;
$height: 156.36px;

我想将其转换成某种比例，以便在调整屏幕大小时，高度和宽度始终相互成比例。我遇到的问题是在尝试使用视口高度或宽度 (vh/vw) 调整宽度/高度时，我不断收到如下错误：

SassError: 27798px*vh isn't a valid CSS value.

另一个问题是我真的不明白通过 vh/vw 调整这些尺寸是如何工作的。我正在寻找的是调整我的 div 的宽度和高度的最佳方法，以便它们在更改屏幕尺寸时变得越来越大，但它们也与它们的原始值保持成比例（按比例）

【问题讨论】：

【解决方案1】：

aspect-ratio 内置于 css 中。

在此示例中，.box 的高度为 112.484px，因为它受到其父项 div 和 200px 的限制。

.wrapper {
  width: 200px;
}

.box {
  aspect-ratio: 277.98 / 156.36;
  background: blue;
}

<div class="wrapper">
  <div class="box">
  </div>
</div>

【讨论】：