CSS не поддерживает соотношение сторон не работает

Question

Это самая странная вещь, я использовал этот метод много раз раньше, но сейчас мне кажется, что он сломался.

Вот дубликат вопроса, который предоставляет этот метод в качестве ответа:

Поддерживать соотношение сторон div с CSS

Но по какой-то неизвестной причине он сломался для меня в Firefox и Chrome. Из того, что я могу собрать, это вычисление отступа в соответствии с родительским элементом элемента, к которому я применяю стиль...

В этом случае это не смотрит на .test но вместо этого смотрит на .parent рассчитать отступ:

.parent {
  width: 200px;
}

.test {
  width: 50px;
  background: red;
  padding-top: 100%;
}

<div class='parent'>
  <div class='test'></div>
</div>

Answer 1

У CSS есть свойство для этого

Answer 2

Это на самом деле правильное поведение. Вы должны сделать дочерний элемент 100% ширины и контролировать размеры с родителем.

Пример:

.parent {
  width: 200px;
}

.child {
  width: 100%;
  background: red;
  padding-top: 100%;
}

<div class="parent">
  <div class="child"></div>
</div>

Вот хороший метод, предложенный для CSS-Tricks, который поможет вам получить правильное заполнение, необходимое для желаемого соотношения:

Соотношение сторон - 2:1

.parent {
  width: 200px;
}

.child {
  width: 100%;
  background: red;
  padding-top: calc(1 / 2 * 100%); // will give you an aspect ratio of 2:1
}

<div class="parent">
  <div class="child"></div>
</div>

Соотношение сторон - 3:1

.parent {
  width: 200px;
}

.child {
  width: 100%;
  background: red;
  padding-top: calc(1 / 3 * 100%); // will give you an aspect ratio of 3:1
}

<div class="parent">
  <div class="child"></div>
</div>

Соотношение сторон - 16:9

.parent {
  width: 200px;
}

.child {
  width: 100%;
  background: red;
  padding-top: calc(9 / 16 * 100%); // will give you an aspect ratio of 16:9
}

<div class="parent">
  <div class="child"></div>
</div>

Вы можете найти полную статью здесь: https://css-tricks.com/aspect-ratio-boxes/