Как работает padding hack?

Question

[godsplane]

Чет я запутался и совсем не понимаю почему в примере у меня такая огромная высота, хотя по идеи у меня должна быть высота меньше 300пх,
если ширину убирать, то все ок, но при ограничении ширины все ломается.
Мне нужен формат 16 на 9.
С aspect ratio все ок работает. что я делаю не так?
https://codepen.io/poylar/pen/MWVNWLJ

Answer 1

[Сергей delphinpro]

56,25% берется не от ширины самого элемента, а от ширины его родителя.
Обычно в этом хаке используют внутренний псевдоэлемент. У него родителем как раз будет сам элемент.

Comments

[Григорий Васильков]

Блин, прикольно, не знал)

<div class="wrapper"><div class="box"></div></div>

.wrapper {
  width: 500px;
}
.box {
  background: red;
  height: 0;
  padding-bottom: 56.25%;
  width: 300px;
}

[Сергей delphinpro]

Григорий Васильков, Этот факт не скрывается, он документирован

https://www.w3.org/TR/CSS21/box.html#propdef-padding

Value:	{1,4} | inherit
Initial:	see individual properties
Applies to:	all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited:	no
Percentages:	refer to width of containing block
Media:	visual
Computed value:	see individual properties

[godsplane]

точно, я забыл про псевдоэлемент, спасибо