• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Соотношение ширины к высоте на CSS (Константа ширины к высоте соотношение с помощью CSS)
Соотношение ширины к высоте на CSS
Kosten
Воскресенье, 21 Апреля 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Как всем известно, что выставляя ширину и высоту, то здесь пользуемся свойствами width и height соответственно. Если говорить про высоту, то здесь больше зависит от того, что будет находится внутри, а точнее от содержимого.

Учитывая элемент переменной ширины, он будет гарантировать, что его высота остается пропорциональной в ответном режиме, то есть отношение ширины к высоте остается постоянным.

Постоянное соотношение ширины и высоты

HTML

Код
<div class="kedesamu-basupkin"></div>

CSS

Код
.kedesamu-basupkin {
  background: #2f2d2d;
  width: 50%;
}
.kedesamu-basupkin::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.kedesamu-basupkin::after {
  content: '';
  display: block;
  clear: both;
}

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

Поддержка браузера: 100%

Демонстрация
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Соотношение ширины к высоте на CSS (Константа ширины к высоте соотношение с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: