Css высота блока пропорционально ширине

aspect — ratio

Код ниже стилизует блок так, что его высота будет равна его ширине:

 .container  width: 200px; aspect-ratio: 1 / 1;> .container  width: 200px; aspect-ratio: 1 / 1; >    Скопировать Скопировано Не удалось скопировать   

Подобное поведение можно получить и в случае, когда задана только высота:

 .container  height: 200px; aspect-ratio: 1 / 1;> .container  height: 200px; aspect-ratio: 1 / 1; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

• auto — соотношение сторон считается автоматически.
• / — соотношение сторон всегда считается относительно ширины и высоты блока.
• auto / — совмещённая запись.

При совмещённой записи соотношение / приоритетнее, но когда у элемента есть собственное соотношение сторон, применится оно:

Чтобы избежать искажений картинки, можно использовать свойство object — fit .

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство вычисляет незаданную сторону, исходя из размера уже известной. Возьмём пример с aspect — ratio : 2 / 1 :

 .container  width: 200px; aspect-ratio: 2 / 1;> .container  width: 200px; aspect-ratio: 2 / 1; >    Скопировать Скопировано Не удалось скопировать   

Соотношение сторон в этом случае — 2 / 1 . Такому соотношению должны равняться и стороны блока: / .

Нам известна ширина — 200px .

Отсюда получаем высоту блока — 100px .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Свойство нельзя применить к строчным элементам.

💡 Хотя большинство значений поддерживается основными браузерами, с некоторыми могут быть трудности. Поэтому на всякий случай проверяйте поддержку на Can I use.

Источник

CSS — Высота блока относительно его ширины

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

Создание блока с высотой, которая имеет определённый процент от его ширины

Создать HTML структуру из 2 блоков:

.item-responsive { position: relative; /* относительное позиционирование */ } .item-responsive:before { display: block; /* отображать элемент как блок */ content: ""; /* содержимое псевдоэлемента */ width: 100%; /* ширина элемента */ } .item-16by9 { padding-top: 56,25%; /* (9:16)*100% */ } .item-responsive>.content { position: absolute; /* абсолютное положение элемент */ /* положение элемента */ top: 0; left: 0; right: 0; bottom: 0; } /* При необходимости (для блоков, имеющих данные классы) */ .item-4by3 { padding-top: 75%; /* (3:4)*100% */ } .item-2by1 { padding-top: 50%; /* (1:2)*100% */ } .item-1by1 { padding-top: 100%; /* (1:1)*100% */ }

Применение вышеприведённой технологии при создании карусели Bootstrap

Если вы не знакомы с Bootstrap и хотите узнать что это такое, то можете воспользоваться статьёй Введение в Bootstrap.

Рассмотрим пример, в котором вышеприведённую HTML структуру и CSS код будем использовать для отображения слайдов карусели Bootstrap.

В качестве изображений будем использовать следующие файлы:

• carousel_1.jpg (ширина = 736px, высота = 552px, соотношение сторон (высота к ширине) = 1,33);
• carousel_2.jpg (ширина = 1155px, высота = 1280px, соотношение сторон (высота к ширине) = 0,9);
• carousel_3.jpg (ширина = 1846px, высота = 1028px, соотношение сторон (высота к ширине) = 1,8);
• carousel_4.jpg (ширина = 1140px, высота = 550px, соотношение сторон (высота к ширине) = 2,07);
• carousel_5.jpg (ширина = 800px, высота = 600px, соотношение сторон (высота к ширине) = 1,33);

Изображения будем задавать как фон. Это позволит использовать в карусели Bootstrap 3 изображения с не одинаковыми соотношениями сторон.

.item-responsive { position: relative; /* относительное позиционирование */ } .item-responsive:before { display: block; /* отображать элемент как блок */ content: ""; /* содержимое псевдоэлемента */ width: 100%; /* ширина элемента */ } .item-16by9 { padding-top: 56.25%; /* (9:16)*100% */ } .item-responsive>.content { position: absolute; /* абсолютное положение элемент */ /* положение элемента */ top: 0; left: 0; right: 0; bottom: 0; background-size: cover !important; }

Источник

Как поставить высоту блока div в зависимость от ширины?

Есть резиновый блок div (width: 100%;). Его высота должна быть пропорциональна его ширине. Например, если ширина 1000px, то высота 400px, если ширина 600px, то высота — 240px и тд.

Как это сделать?
Если необходимо, можно с использованием JS (jQ).

Оценить 1 комментарий

Частный случай. Если ширина блока во весь экран.
Устанавливаем ширину width: vw100; а высоту в процентах от ширины, к примеру height: vw50;
Свойство calc расширяет возможности, к примеру height: calc(vw50 — 20px);
Во многих случаях достаточно CSS

Думаю что вопрос актуальный. Так что напишу.
Есть библиотека Stickjaw.js
Подключаете в футоре и вызываете скриптов ( в документации написано, ни чего сложного )

Чтобы сделать высоту такой же как ширину нужно в блок добавить атрибут data-proportion-h=»1″. 1 — это пропорция. Если вам нужно сделать, чтобы высота была как две ширины то пишите 2 т.е data-proportion-h=»2″

Зачем скрипты? Можно ведь обычным css’ом обойтись:
jsfiddle.net/qso14y3k

Один минус — 2 дополнительные обёртки для каждого блока. Но это не смертельно. Фокус этот работает по стандартам, так что работать должен везде.
Также эта техника входит в toolkit, который написан ребятами, которые написали Singularity.

Источник

Сохраняем пропорции высоты и ширины элемента при изменении ширины контента на чистом CSS

Как пропорционально уменьшать ширину и высоту различных элементов при изменении ширины родительского контейнера?

Для изображений это делается очень просто, задаем свойству height значение auto , при этом максимальную ширину изображения ограничиваем шириной родительского контейнера max-width: 100%;

Проблема в том, что мы не можем задать height: auto; для блочных элементов, например для DIV. В данном случае 100% — это будет высота родителя.

Решение проблемы

HTML

Нам нужны два блочных элемента для достижения желаемого поведения. Нет изображений, нет Javascript.

CSS

Итак, что это? Мы определяем псевдоэлемент для нашего ящика и задаем ему margin-top 100% . Поскольку это 100% значение относится к ширине элемента … вы получаете его ( height: 0; padding-bottom: 100%; также будет работать, но тогда вы должны отрегулировать значение padding-bottom каждый раз, когда вы меняете ширину).

Таким образом, наш блок уже выше ширины. Если вы хотите отображать только несколько цветных блоков, тогда уже все готово. Но поскольку пользовательский интерфейс намного сложнее, и если вы также предоставляете некоторый контент, мы добавляем контент в наш блок .box .

Контент

И вот трюк: мы просто позиционируем блок контента как абсолютный со всеми четырьмя ориентациями, установленными в 0. Это просто покрывает родительский элемент полностью, независимо от того, какой размер он имеет.

Вот и все. Блестяще, не так ли? Даже padding не сломает его, и нет необходимости в box-sizing: border-box здесь.

Другие пропорции

Если вы хотите создать другие коэффициенты, просто измените значение padding-top псевдоэлемента:

/* Other ratios */ .ratio2_1:before < padding-top: 50%; >.ratio1_2:before < padding-top: 200%; >.ratio4_3:before < padding-top: 75%; >.ratio16_9:before

IE7 и ниже

Поскольку IE такой IE, и особенно IE7 — это все, но только не браузер, вы должны сами создать элемент вместо псевдоэлемента в своей разметке, если хотите поддержать IE. Или бросьте на него Javascript, пока он, надеюсь, не сломается. Навсегда.
Мой вольный перевод статьи http://www.mademyday.de/css-height-equals-width-with-pure-css.html.

Рабочий пример на CodePen:

Вариант №2 — Сохраняем пропорции высоты и ширины элемента при изменении ширины контента на чистом CSS без псевдоэлементов

Есть второй вариант без псевдоэлементов, но при его использовании блок всегда имеет ширину 100%, поэтому если нужно несколько таких блоков в ряд, то они должны быть помещены в какой-то родитель, у которого уже будет задана нужная ширина относительно остальных элементов на странице.

HTML

CSS

.box < background-color: red; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */ position: relative; >/* If you want text inside of the container */ .content

Другие пропорции

.ratio16_9 < padding-top: 56.25%; /* 16:9 Aspect Ratio */ >.ratio4_3 < padding-top: 75%; /* 4:3 Aspect Ratio */ >.ratio3_2 < padding-top: 66.66%; /* 3:2 Aspect Ratio */ >/* Other ratios */ .ratio8_5 < padding-top: 62.5%; /* 8:5 Aspect Ratio */ >

Рабочий пример на CodePen:

Самый простой пример фиксированного плавающего сайдбара на HTML+CSS+JS. В чем его особенность — при прокрутке…

Еще один фиксированный блок Меню при прокрутке страницы. Было бы замечательно, если бы IE поддерживало…

Простая инструкция, как перенести сайт на CMS WordPress с одного хостинга на другой. На самом…

Суть задачи, чтобы видео, которое находится где-то на странице, включалось только при прокрутке страницы, когда…

Источник