Is there a method to set the width of a div to its height in CSS?

Question

In CSS, if I want to set a div's height to its width, I can use padding-bottom:100%. However, I want to set a certain div's height to the viewport height, and have the div's width resize so that the div is square. Is there a method of doing so in CSS?

soimon · Accepted Answer · 2021-01-10T16:54:09.870

4

If you aim to set its height to the viewport height, you can as well set its width to the viewport height:

.square {
  height: 100vh;
  width: 100vh;
}

In case you're not familiar with this unit: 1vh represents one percent of the view height.

Edit: depending on how responsive you want your design to be, you can also make use of the 1vmin unit, which represents 1 percent of the smallest side of your screen.

.square {
  height: 100vmin;
  width: 100vmin;
}

Regardless of whether your website is viewed in portrait or landscape mode, the square will always max out its size without causing the page to scroll.

edited Jan 10 '21 at 16:54

answered Jan 10 '21 at 16:49

soimon

2,400
1
15
16

I will accept the answer once it allows me to. – knosmos Jan 10 '21 at 16:52
That's fine. I've updated my answer to introduce another approach that might even have more benefits. – soimon Jan 10 '21 at 16:55
This new approach is even better! Thank you very much! – knosmos Jan 10 '21 at 17:02

Is there a method to set the width of a div to its height in CSS?

1 Answers1