Высота div равная ширине на CSS

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

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

img {
	min-width: 100%;
	height: auto;
}

Но что делать если такое поведение требуется для блочного элемента (например для тега div)?

Свойство height: auto; здесь уже не поможет, поэтому нужно искать другое решение. Разумеется, для изменения размеров, мы можем применять JavaScript, но тогда это будет не самым лучшим решением. Поэтому давайте все же постараемся реализовать все это на чистом CSS.

Смотреть видеоурок

Для начала создадим необходимую HTML-структуру:

HTML

<div class="responsive-box"> 
	<div class="content">Какой-то текст...</div> 
</div>

Нам нужно создать два блочных элемента, содержимое размещаем внутри второго блока (в нашем случае это блок с классом .content).

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

Затем добавим CSS.

CSS

.responsive-box {
	position: relative;
	width: 30%; /* Произвольная ширина, которая требуется для блока */
}
.responsive-box::before {
	content: "";
	display: block;
	padding-top: 100%; /* С помощью этого padding мы задаем высоту равную ширине блока */
}
.content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(images/bg.jpg) no-repeat center center; /* Задаем фон, если требуется */
    background-size: cover; /* Растягиваем фон под размеры блока, если требуется */
}

Как видите, для блока .content, мы можем смело задавать какой-то фон и этот фон также будет растягивать в зависимости от размеров блока.

Поглядите, что у нас получилось. Для этого зайдите на страницу "Демо" и попробуйте изменить размеры окна браузера.

Другие соотношения сторон

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

Если нам требуется другое соотношение сторон, то для этого нужно поиграться со свойством:

.responsive-box::before {
	padding-top: 50%; /* С помощью этого padding мы задаем высоту в 2 раза меньше, чем ширина блока */
}

Сейчас мы указали значение 50%, вместо 100%, как это было на первом примере. Таким образом, мы изменили соотношение сторон нашего блока, теперь оно будет равно 1:2.
То есть, высота будет в два раза меньше, чем ширина.

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

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (8)

Александр 14 декабря 2016 г. в 15:04

Добрый день. Скажите, если добавить такой код в css, почему padding-top примет значение width:50% и задаст высоту равную ширине? разве padding и width связаны? Спасибо большое.

.responsive-box{
position:relative;
width:50%;
}

.responsive-box:before{
content:"";
display:block;
padding-top:100%;
}

Ответить

алекс 12 сентября 2016 г. в 09:42

что-то я не соображу. а если мне надо таких квадратов 8 штук в 2 ряда по 4 в каждом и чтобы все растягивалось под ширину экрана как быть? я пробовал выставить несколько таких дивов, но они сливаются как бы в один или начинают строиться друг под другом а нужна конструкция
0000
0000
вот такого типа каждый квадрат 25% от ширины экрана и столько же в высоту

Ответить

Андрей 1 апреля 2016 г. в 21:57

Спасибо, очень для меня актуально и как всегда очень толково преподнесено.

Ответить

Анатолий 17 марта 2016 г. в 13:07

Очень интересно и познавательно.
Благодарю автора.

Ответить

Владимир 17 марта 2016 г. в 10:17

Спасибо за полезный урок

Ответить

Николай 16 марта 2016 г. в 22:05

http://prntscr.com/ag3htn

Ответить

Александр Пауков 17 марта 2016 г. в 08:06

Николай, псевдоэлемент :before работает совместно со свойством content. C помощью этого свойства мы вставляем какой-то контент до содержимого нашего элемента .responsive-box

Если бы мы написали .responsive-box::before { content: "123" }

То у нас перед содержимым появились бы цифры 123. То есть, что написано в свойстве контент, то и добавится.

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

Вообще не указывать свойство content мы не можем, т.к. псевдоэлемент не добавится без свойства content.

Ответить

Николай 17 марта 2016 г. в 10:58

Александр Пауков, Вот теперь ясно и понятно) Спасибо я Вам очень благодарен!!!

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад