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>

Hyperbole

I have confirmed with friends that they also see a tall rectangle instead of a square... which makes no sense – Hyperbole

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 – Villanueva

D'oh! Blonde moment.. nothing to see here move along folks :D – Hyperbole

Try padding-top: 25%; – Eldwun

@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 – Hyperbole

So you are changing .test {width: 50px;} to .test {width: 100%}? What were you trying to achieve with the 50px? – Eldwun

@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. – Hyperbole

Seemed like you were asking for something like this: jsfiddle.net/MpXYr/5128 ; but I might have just misunderstood. – Eldwun

Ah right, that is actually a cool method you have there, but not what I was asking. Apologies. – Hyperbole

All good, glad you got the answer you needed. Happy coding! – Eldwun

Answer 1

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>

Manufactory

What's the point to use aspect-ratio prop since it doesn't have support in all major browsers? – Soosoochow

doesn't aspect ratio make code more readable instead of hacks – Manufactory

now it doesn't. still have to use hacks due to it's support – Soosoochow

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. – Manufactory

such approach takes place if you have 1 potential user on your website – Soosoochow

nice sqaure! :) – Autograph

Answer 2

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/

Hyperbole