CODEWITHSUNDEEP
javascriptcssangularheightwidth
legendarny ziom
legendarny ziom

Reputation: 75

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

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

Upvotes: 2

Views: 2816

Answers (2)

Vega
Vega

Reputation: 28708

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

Upvotes: 5

FAISAL
FAISAL

Reputation: 34673

You need to use square.offsetWidth:

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

Link to working demo.

Upvotes: 1

Related Questions