Объясните, почему это работает?
Нашел css код который даёт нам резиновый квадрат с фиксированными пропорциями. т.е. квадрат остаётся квадратом как мы бы не изменяли ширину бразура. Я не могу понять, почему див в значение высоты принимает значение ширины?
div {
width: 50%;
/* Задаём ширину */
margin: auto;
/* Размещаем по цетру */
background: silver;
/* Задаём фон */
overflow: hidden;
/* Скрываем всё, что выходит за границы*/
}
div:before {
/* Добавляем свойства в конец элемента */
content: "";
padding-top: 100%;
/* Отступ сверху */
float: left;
/* Приковываем к левому краю */
}<div></div>Ответы (1 шт):
Автор решения: Grundy
→ Ссылка
Как указано в спецификации:
значение отступа, указанное в процентах, рассчитывается относительно ширины содержащего блока.
Таким образом, задав padding-top: 100% мы распираем элемент before, и, как следствие, сам div, на 100% ширины дива, что позволяет получить в итоге квадратный вид.