• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Соотношение ширины к высоте сторон в CSS (Как сделать элементы в поддержке соотношений ширины и высоты)
Соотношение ширины к высоте сторон в CSS
Kosten
Дата: Понедельник, 2019-04-01, 22:42 | Сообщение 1
Администраторы
Сообщений:24298
Награды: 56


Если кто еще не знает, как заставить HTML элементы, чтоб они автоматически поддерживали поддерживать постоянное соотношение, как высоты, так и ширины. Где не применяем коды и JavaScript, а все делается на чистой стилистике CSS.

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



HTML

Код
<div class="sotenosek_nigevesotyd"></div>

CSS

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

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

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