How to set an element's height same as its width and keep the size ratio on window resize?

Question

I am trying to set the height of an element same as its width. It should be auto-scaling/ keep size ratio according to web browser resolution changes. Is there a way to do that with only html template? Something like:

<div class="tile" #square [ngStyle]="{'height.px': square.width}">

Answer 1

The trick is to use the element's offsetWidth, but we also need to silent the window resizing to keep the ratio

HTML:

  <div #square (window:resize)="0" [ngStyle]="{'height.px': square.offsetWidth }">

DEMO