1

according to this Q/A I always used padding-top or padding-bottom to maintan the aspect ratio of a div. Today I faced simple structure which is not rendered with aspect of 5/2 (w/h). For padding-top:40% I expect a horizontal rectangle as the padding-top is calculated against the width. Why this is vertical? (It seems that the height is calculated against the parent width)

#aspect52 {
    width:30%;
    padding-top:40%;
    background:#ff0000;
    position:absolute;
}

#parent{
    position:relative;
    width:100%;
}
<div id="parent">
    <div id="aspect52"></div>
</div>
Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
  • 1
    You are limiting the width to 30%, when it should be 100% for your ratio. Put 30% on the parent not the child... see [here](https://jsfiddle.net/um0hqw35/) – zgood Aug 25 '19 at 12:39
  • The padding as percentage (%) will take the parent's width, not the parent's height. In any case, for me, I'd avoid percentage in padding as much as possible and take any other solution/workaround because I know I'll definitely end-up with cross-browser issues! – evilReiko Aug 25 '19 at 12:48

0 Answers0