Maintain div aspect ratio according to height

Question

I need to maintain the width of an element as a percentage of its height. So as the height changes, the width is updated.

The oppo

Answer 1

I can't find a pure CSS solution. Here's a solution using CSS Element Queries JavaScript library.

var aspectRatio = 16/9;
var element = document.querySelector('.center');
function update() {
  element.style.width = (element.clientHeight * aspectRatio) + 'px';
}

new ResizeSensor(element, update);
update();

CodePen demo!