如何将元素的高度设置为其宽度并在窗口调整大小时保持大小比例? [英] How to set an element's height same as its width and keep the size ration on window resize?

问题描述

我试图将元素的高度设置为其宽度.它应该根据 Web 浏览器分辨率的变化自动缩放/保持大小比例.有没有办法只用 html 模板来做到这一点?类似的东西:

解决方案

诀窍是使用元素的 offsetWidth，还要在窗口调整大小时将其大小设置为空(这归功于 @yurzui):

HTML:

演示

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}">

解决方案

The trick is to use the element's offsetWidth, but also to set its size on window resizing to a void (the credit fo this goes to @yurzui):

HTML:

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

DEMO

这篇关于如何将元素的高度设置为其宽度并在窗口调整大小时保持大小比例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！