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


Изменения в размере браузера могут создавать искажения элементов и влиять на способ отображения содержимого внутри. Поэтому иногда важно поддерживать соотношение сторон контейнера div. Это можно сделать с помощью CSS3, что изменение высоты контейнера div пропорционально изменению ширины. Это также может быть сделано в JavaScript, хотя маршрут CSS3 может быть предпочтительнее.

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

16:9 = 56.25%
4:3 = 75%
3:2 = 66.66%
8:5 = 62.5%

CSS3 код для формата DIV

Код CSS3 для поддержания соотношения сторон 3: 2 выглядит следующим образом:

Код
div {
width: 100%;
padding-bottom: 66.66%;
background:red;
}


Фон был установлен на красный только для иллюстрации.

Тем не менее, содержимое внутри содержимого внутри div может растянуть его, и этого можно избежать, добавив дочерний элемент с установленным абсолютным положением и растянутыми к краям оболочки. Код CSS3 для этого выглядит следующим образом:

Код
div.stretch-wrapper {
position: relative;
}
div.stretch-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}


Альтернативный вариант

Есть и другой способ решения той же проблемы поддержания соотношения сторон. В этом случае соотношение сторон div можно установить по ширине области просмотра или высоте области просмотра. Следующие множители будут использоваться для расчета единиц просмотра.

- Соотношение сторон 1:1, умножьте единицы просмотра на 1
- Соотношение сторон 1:3, умножьте единицы просмотра на 3
- Соотношение сторон 4:3, умножьте единицы просмотра на 0,75
- Соотношение сторон 16:9, умножьте единицы просмотра на 0,5625

Вот код CSS3 для поддержания соотношения сторон в соответствии с шириной области просмотра или высотой области просмотра.

Код
div{
width: 20vw;
height:20vw;
background:red;
}


Фон был установлен на красный только для иллюстрации.

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

Демонстрация

Пример: квадратная квадратная сетка



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

HTML

Код
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>


CSS

Код
body{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
div {
  width:23vw;
  height:23vw;
  margin:0.5vw auto;
  background:gold;
}

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

Демонстрация
Прикрепления: 8719912.png(3.3 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2019-04-06, 23:24 | Сообщение 2
Администраторы
Сообщений:22308
Награды: 56


Создается div который может изменить свою ширину и высоту при изменении ширины окна. Отзывчивый размер - это когда можно динамически изменять размер, чтобы соответствовать его контейнеру, сохраняя при этом желаемое соотношение сторон.

Размещение контента в div:

Чтобы сохранить форматное соотношение div и предотвратить поставку его содержимого, необходимо добавить полностью позиционированный дочерний элемент и выполнить следующие действия для упаковки:



HTML


ZorNet - портал для вебмастера


CSS

Код
body {
    width: 36%;
    margin: 8px auto;
}

div.megodusing-psued-kemes {
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;

    background: blue;
}

div.megodusing-psued-kemes > div {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;

    color: white;
    font-size: 24px;
    text-align: center;
}


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