0

I am trying to keep aspect ratio 1:1 but following code isn't working:

.container {
  background-color: red;
  width: 10%;
  padding-top: 100%; /* for 1:1 Aspect Ratio */
}
<div class="container"></div>

As per this article:

Even when that is a little unintuitive, like for vertical padding. This isn't a hack, but it is weird: padding-top and padding-bottom is based on an element's width. So if you had an element that is 500px wide, and padding-top of 100%, the padding-top would be 500px.

But in above code if I keep width : 10%, and padding-top: 100%, I can't get aspect ration 1:1. Why?

asdasd
  • 6,050
  • 3
  • 14
  • 32
  • _“padding-top and padding-bottom is based on an element's width”_ - no, they are not; they are based on the width of the element’s _containing block_. You’ll need to nest a second element into this, and apply the padding to that one. – misorude Aug 08 '19 at 13:47
  • the article is wrong, it's the parent width – Temani Afif Aug 08 '19 at 13:47
  • Thanks. Does that mean that all example [here](https://www.w3schools.com/howto/howto_css_aspect_ratio.asp) are wrong and they are working by change because div's width is same as parent (body) width? – asdasd Aug 08 '19 at 13:54
  • all the examples use width:100% so the width of the element is the same as its parent – Temani Afif Aug 08 '19 at 14:06

0 Answers0