如何将元素的高度设置为与其宽度相同，并在 window 调整大小时保持大小比例？

Question

我正在尝试将元素的高度设置为其宽度。它应该根据网络浏览器分辨率的变化自动缩放/保持大小比例。有没有办法只使用 html 模板来做到这一点？类似于：

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

Answer 1

你需要使用square.offsetWidth:

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

Answer 2

诀窍是使用元素的 offsetWidth，但也将其大小设置为 window 调整为空（归功于@yurzui）：

HTML:

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

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