is there a way to find ratio for size and width of div-CodePudding

I have two sass variables for width and height of a certain div:

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

I want to convert this into some kind of ratio so that when adjusting the size of the screen, height and width are always proportionate to each other. The issue I was having was when trying to adjust width/height using viewport height or width (vh/vw) I kept getting errors like:

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

Another issue is that I don't really understand how adjusting these dimensions by vh/vw even really works. What I'm looking for is the best way to go about adjusting the width and height of my div, so that they get bigger and smaller when changing screen size, but that they also stay proportionate to their original values (ratio-wise)

CodePudding user response：

aspect-ratio is built into css.

In this example, .box has a height of 112.484px because it is constrained by its parent div's width of 200px.

.wrapper {
  width: 200px;
}

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

<div >
  <div >
  </div>
</div>