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

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

  • автор:

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

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

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

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

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

HTML

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

 
Aspect ratio of 1:1

CSS

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

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

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

Контент

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

.content

Вот и все. Блестяще, не так ли? Даже 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 с одного хостинга на другой. На самом…

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

CSS: Высота блока, зависящая от ширины

Описанное реализовано тут: https://codepen.io/Coder10000000000/pen/MWvjOpR Есть два блока — левый и правый. У левого фиксированная ширина в пикселях. У правого — всё оставшееся пространство. При этом внутри правого блока должен находиться квадратный контейнер. Ширина квадратного контейнера равна ширине правого блока, а высота равна ширине. Для задания контейнеру высоты равной ширине, я использовал трюк с абсолютно спозиционированным псевдоэлементом before. Не понимаю до конца, как это работает, но контейнер действительно становится квадратным. Проблема в том, что в виду абсолютного позиционирования, при увеличении квадратного контейнера, он наползает на нижние блоки, не растягивая по высоте родительский правый блок, а вылезая поверх. А нужно, чтобы квадратный контейнер растягивал родителя. Есть какой-то способ это исправить? Возможно есть другое решение (резюмируя, нужен квадратный блок с шириной, зависящей от родителя, который при увеличении растягивает высоту родителя)? Я знаю, что высоту, зависящую от ширины можно задать с помощью JS, но необходимо решить задачу средствами CSS html

 
Нижние блоки, на которые наползает абсолютно спозиционированный контейнер
.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

27 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 > *
 
Левый
Правый
Контейнер
Нижние блоки, на которые наползает абсолютно спозиционированный контейнер

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

Author24 — интернет-сервис помощи студентам

Ширина блока задана как «width: 100%», то есть 100% от родительского блока. Как задать высоту блока в процентах не от родителя а от своей же ширины?

94731 / 64177 / 26122

Регистрация: 12.04.2006

Сообщений: 116,782

Ответы с готовыми решениями:

Как сделать высоту равной ширине при ширине 100%?
как можно сделать элемент(например таблицу) квадратным, т.е. высота равна ширине(ширина 100%)

Как сделать высоту блока равной высоте экрана?
Пробую делать height:100%, но как я понял, блок наследовать эти 100% начинает от родителя. Как мне.

Как сделать нормальный фон по ширине при сужении длины в css
как сделать чтобы по ширине при сужении экрана не было белого фона, а было заполнение картинкой.

Как ширину одного из столбцов поля со списком сделать равной ширине столбца формы?
Здравствуйте! Подскажите пожалуйста, как ширину одного из столбцов поля со списком сделать равной.

Регистрация: 21.07.2018

Сообщений: 142

Вот пример(если я правильно понял):

1 2 3
div class="wrapper"> div class="block">/div> /div>
1 2 3 4 5 6 7 8 9
.wrapper{ width: 500px; } .block { width: 100%; background: red; padding-top: 50%; padding-bottom: 50%; }

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

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

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

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

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

wapster92

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

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

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

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

Aetae

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *