0

Нашел css код который даёт нам резиновый квадрат с фиксированными пропорциями. т.е. квадрат остаётся квадратом как мы бы не изменяли ширину бразура. Я не могу понять, почему див в значение высоты принимает значение ширины?

div {
  width: 50%;
  /* Задаём ширину */
  margin: auto;
  /* Размещаем по цетру */
  background: silver;
  /* Задаём фон */
  overflow: hidden;
  /* Скрываем всё, что выходит за границы*/
}

div:before {
  /* Добавляем свойства в конец элемента */
  content: "";
  padding-top: 100%;
  /* Отступ сверху */
  float: left;
  /* Приковываем к левому краю */
}
<div></div>

4
  • div:width 10vw height 10vw - тоже делает блок квадратным Commented 25 апр. 2020 в 3:17
  • /* Добавляем свойства в конец элемента */ - в начало, потому и before
    – Grundy
    Commented 25 апр. 2020 в 10:45
  • а где место, про которое ты говоришь див в значение высоты принимает значение ширины? В приведенном css не указана высота
    – Grundy
    Commented 25 апр. 2020 в 10:45
  • Присоеденяюсь к @Grundy, не вижу места места про которое говорится в вопросе :)
    – Andrey RF
    Commented 25 апр. 2020 в 10:55

1 ответ 1

0

Как указано в спецификации:

значение отступа, указанное в процентах, рассчитывается относительно ширины содержащего блока.

Таким образом, задав padding-top: 100% мы распираем элемент before, и, как следствие, сам div, на 100% ширины дива, что позволяет получить в итоге квадратный вид.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.