0

I am trying to support an older browser with a padding-based css ratio fallback.

I have a container that I expect to default to 16/9 ratio with the following markup, however the height is not matching expectation. In the below instance it should be 720px high but it is rendering at 987px (which I assume is based on my browser window).

.ratio {
  display: block;
  height: 0;
  width: 1280px;
  padding: 0 0 56.25% 0;
  position: relative;
}

.child {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #555;
}

I have created a pen to illustrate, can anyone spot the issue?

https://codepen.io/ozorchard/pen/yLpodEb

Note: I have followed the structure from previously flagged answers. Maintain the aspect ratio of a div with CSS

Croot
  • 331
  • 1
  • 10
  • 2
    Padding in percentage applies to the width of the containing block, and that is `.container` in your example (which should be fully contained within your question, btw., see [mre].) – CBroe Mar 31 '22 at 09:56
  • Ehm, but if you hardcode the width to `1280` why can't you hardcode the height to `720`? – Kokodoko Mar 31 '22 at 09:59

0 Answers0