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

Question

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

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

Answer 1

诀窍是使用元素的 offsetWidth，但我们还需要静默调整窗口大小以保持比例

HTML：

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

演示版