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

Question

[godsplan]

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

Answer 1

[Сергей delphinpro]

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

Comments

[Сергей 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

[godsplan]

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