CSS Maintain Aspect Ratio not working

Question

This is the strangest thing, I have used this method many times before but it seems to be breaking for me now.

Here is a duplicate question that provides this method as an answer:

Maintain the aspect ratio of a div with CSS

But for some unknown reason it's breaking for me in Firefox and Chrome. From what I can gather it's calculating the padding according to the parent of the element I'm applying the style to...

In this case it's not looking at .test but instead is looking at .parent to calculate the padding:

.parent {
  width: 200px;
}

.test {
  width: 50px;
  background: red;
  padding-top: 100%;
}

<div class='parent'>
  <div class='test'></div>
</div>

I have confirmed with friends that they also see a tall rectangle instead of a square... which makes no sense — IOIIOOIO, Apr 18 '18 at 14:32
It's calculated as percentage of the parent, as always has been. In the answer that you link, the element has a width of 100%, so that the width of the child is the same than the width of the parent — vals, Apr 18 '18 at 14:32
D'oh! Blonde moment.. nothing to see here move along folks :D — IOIIOOIO, Apr 18 '18 at 14:42
@RickSibley no, I believe the previous comment is correct. You are meant to make the child 100% width and control the sizing with the parent. I will post an answer with the correct implementation now — IOIIOOIO, Apr 18 '18 at 14:46
So you are changing `.test {width: 50px;}` to `.test {width: 100%}`? What were you trying to achieve with the 50px? — Rick Sibley, Apr 18 '18 at 14:51
@RickSibley I only put the .test div inside a .parent for the purpose of this question to prove that it was looking at the parent... I thought that was incorrect behaviour. I thought it was meant to get it's padding value from .test and should have given me a square. Sorry for causing confusion. It was a brain-fart on my behalf. — IOIIOOIO, Apr 18 '18 at 15:04
Seemed like you were asking for something like this: http://jsfiddle.net/MpXYr/5128/ ; but I might have just misunderstood. — Rick Sibley, Apr 18 '18 at 15:05
Ah right, that is actually a cool method you have there, but not what I was asking. Apologies. — IOIIOOIO, Apr 18 '18 at 15:07

whatever · Answer 1 · 2021-04-06T11:41:49.710

5

CSS has a property for this

.square {
  aspect-ratio: 1 / 1;
  width: 100px;
  background: grey;
  padding: 10px;
  color: white;
}

<div class="square">a sqaure</div>

update:
there is another way if your support is absolutely crucial and you cant live with firefox being unsupported then here you go. But its a bit janky.

div {
width: 5em;
height: 5em;
font-size: 3vw; background: grey; padding: 0.5em;}

/*em is relative to font-size so you could use that and vw is veiwport width where 100 is all of the veiwport. the size of the shape is now 5 * 3vh*/

<div>hello</div>

edited Apr 06 '21 at 11:41

answered Feb 16 '21 at 10:59

whatever

133
1
10

What's the point to use `aspect-ratio` prop since it doesn't have support in all major browsers? – mr.boris Mar 22 '21 at 18:26
1

doesn't `aspect ratio` make code more readable instead of hacks – whatever Mar 31 '21 at 15:06
1

now it doesn't. still have to use hacks due to it's support – mr.boris Apr 01 '21 at 15:25
to be fare firefox doenst support aspect-ratio when I thought it did but I wouldnt care inless my site is oriented at that market. – whatever Apr 06 '21 at 11:33
such approach takes place if you have 1 potential user on your website – mr.boris Apr 07 '21 at 12:08

IOIIOOIO · Answer 2 · 2018-04-18T15:05:53.910

That is actually the correct behaviour. You are meant to make the child 100% width and control the sizing with the parent.

Example:

.parent {
  width: 200px;
}

.child {
  width: 100%;
  background: red;
  padding-top: 100%;
}

<div class="parent">
  <div class="child"></div>
</div>

Here is a nice method proposed on CSS-Tricks that helps you get the correct padding you need for the desired ratio:

Aspect Ratio - 2:1

.parent {
  width: 200px;
}

.child {
  width: 100%;
  background: red;
  padding-top: calc(1 / 2 * 100%); // will give you an aspect ratio of 2:1
}

<div class="parent">
  <div class="child"></div>
</div>

Aspect Ratio - 3:1

.parent {
  width: 200px;
}

.child {
  width: 100%;
  background: red;
  padding-top: calc(1 / 3 * 100%); // will give you an aspect ratio of 3:1
}

<div class="parent">
  <div class="child"></div>
</div>

Aspect Ratio - 16:9

.parent {
  width: 200px;
}

.child {
  width: 100%;
  background: red;
  padding-top: calc(9 / 16 * 100%); // will give you an aspect ratio of 16:9
}

<div class="parent">
  <div class="child"></div>
</div>

You can find the full article here: https://css-tricks.com/aspect-ratio-boxes/

CSS Maintain Aspect Ratio not working

2 Answers2