Как сделать ширину равной высоте css

 
Aspect ratio of 1:1
 
 

.box < position: relative; width: 50%; /* desired width */ >.box:before < content: ""; display: block; padding-top: 100%; /* initial ratio of 1:1*/ >

.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 */ >

.section < width: 100%; display: flex; &-wrapper < background-color: #ff9595; height: 500px; flex: 50%; display: flex; &-left < background-color: #824caf; flex: 180px; >&-right < background-color: #841919; flex: calc(100% - 180px); >> > .item-responsive < padding-top: 100%; /* (1:1)*100% */ position: relative; background-color: #a7db81; &:before < display: block; content: ""; width: 100%; >& > * < position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #3e6132; >> 

Отслеживать

задан 20 окт 2021 в 22:13

Unicode101 Unicode101

25 1 1 серебряный знак 6 6 бронзовых знаков

А может всё-таки так? ru.stackoverflow.com/a/450697/178988

20 окт 2021 в 23:21

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Хак с отступом вполне рабочий. Думаю, что достаточно заменить высоту родителя с height на min-height и нужное поведение будет достигнуто:

.section < display: flex; width: 100%; >.section-wrapper < display: flex; /* height: 500px; */ min-height: 500px; flex: 50%; background-color: #ff9595; >.section-wrapper-left < flex: 180px; background-color: #824caf; >.section-wrapper-right < flex: calc(100% - 180px); background-color: #841919; >.item-responsive < position: relative; padding-top: 100%; /* (1:1)*100% */ background-color: #a7db81; >.item-responsive::before < content: ""; display: block; width: 100%; >.item-responsive > *

 
 
Левый
 
Правый 
Контейнер
 
 
 
 
 
Нижние блоки, на которые наползает абсолютно спозиционированный контейнер

Как задать ширину div равной его высоте?

Видел информацию как задать высоту равной ширине, но мне надо наоборот.
Суть: есть блок с динамической высотой (например 25% от высоты экрана) надо что-бы его ширина в пикселях была равна этой высоте. Получившийся блок обязательно должен оставлять реальные размеры в потоке страницы, т.е. влиял на позиционирование других блоков.

• Вопрос задан более трёх лет назад
• 175 просмотров

1 комментарий

Средний 1 комментарий

WapSter @wapster92 Куратор тега CSS
При помощи css этого не сделать без костылей (на сколько я знаю).

$(function()< $('.some_block').height($('.some_block').width()); $(window).resize(function()< $('.some_block').height($('.some_block').width()); >); >);

код стыбрен из вопроса Как поставить высоту блока div в зависимость от ширины? Хорошо бы тебе поиском научиться пользоваться)

Решения вопроса 1

Если размеры зависят от экрана — просто используйте единицы измерения в vh или vw:

Если же размеры зависит от родителя, то тут придётся использовать трюк с canvas(или прозрачной гифкой — если по классике):

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 изображения с не одинаковыми соотношениями сторон.

HTML разметка карусели:

 
   
 
 
 
 
Слайд 1
 
 
 
 
 
Слайд 2
 
 
 
 
 
Слайд 3
 
 
 
 
 
Слайд 4
 
 
 
 
 
Слайд 5
 
 
  Previous  Next  

CSS код карусели:

.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; }