Как сделать постоянный прямоугольный блок на странице в соотношение 2: 1?

Question

[yadscreech]

Есть страница на экран устройства, нужно сделать так чтоб, зелёный прямоугольник внутри, всегда оставался прямоугольником в соотношение 2:1, т.е. нужно чтоб от изменения экрана устройства или окна высчитывался прямоугольник с сторонами 2х и х соответсвенно, есть такой код, но он не постоянно мониторит, а сразу после перезагрузки, а нужно постоянно, или как то иначе это сделать, help pls

<div class="section">
  <div class="section-wrapper">
  </div>
</div>

body {
  padding: 0;
  margin: 0;
}

.section {
  background: blue;
  margin: 0;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

var section = $('.section-wrapper');
var width = $(section).width();
var sectionWidth = (width / 2);
section.css('height', +sectionWidth+ 'px');

https://codepen.io/screech/pen/aQbeVz

Answer 1

[Александр]

.section-wrapper {
    width: 90vw;
    height: calc(90vw/2);
}

Comments

[yadscreech]

Капец ты гений (ну или я тупой сильно)