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

Height equals width with pure CSS

I was looking for a solution for flexible elements which remain the aspect ratio when resized. Until now I used some Javascript for resizing the elements.

But using the resize event and recalculate the height of an element is some kind of nasty and never felt right. Recently I found a solution in an article from A List Apart and a topic on StackOverflow, which works quite well. There was also potential for further reducing the code.

Examples (resize your browser to see the remaining ratios)

Description

If you have an image with a certain aspect ratio you can easily keep the proportion with the «auto» value. Like:

The problem is that you can’t use the «auto» value for the height property of a block element like a DIV or alike. It will always resize depending on the inner content/elements.

The trick

I found a solution which was already posted four years ago on A List Apart. Also a kind of follow-up on Stack Overflow. This is so brilliant that I want to share the beauty (NERD!) of that solution with you:

We need two block elements to achieve the desired behaviour. No images, no Javascript.

So, what’s this? We define a pseudo element for our box and give it a padding-top of 100%. Since this 100% value relates to the element’s width. you get it (height: 0; padding-bottom: 100%; would also work, but then you have to adjust the padding-bottom value every time you change the width).

So our box is already as high as wide. If you only want to display some colored tiles, you are already done. But since the user experience is way better if you also provide some content we add a content element to our box.

The content

And here is the trick: We just float the content element. This lets the content fill the outer box.

That’s it. Brilliant, isn’t it? Even a padding doesn’t break it, no need for box-sizing: border-box here.

Other aspect ratios

If you want to create other ratios just change the padding-top value of the pseudo element (see example):

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

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

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

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

Создать HTML структуру из 2 блоков: Первый блок имеет 2 класса. С помощью класса item-responsive установим блоку относительное позиционирование. Это необходимо выполнить для того, чтобы 2 блок (который будет иметь абсолютное позиционирование) располагался относительно него. Кроме этого данный класс также используется для того, чтобы перед содержимым соответствующих элементов ( item-responsive ) добавить псевдоэлемент :before . Этот элемент будет устанавливать необходимую высоту блока относительно его ширины с помощью CSS-свойства padding-top . Трюк данного метода заключается в том, что если свойству padding указывать значение не в пикселях, а в процентах, то оно будет рассчитываться браузером относительно его ширины. Таким образом, можно получить блок с необходимой высотой. Следующее действие — это указать 2 блоку абсолютное позиционирование и выровнять его по первому блоку.
Добавить на страницу следующий CSS код:

Применение вышеприведённой технологии при создании карусели 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 изображения с не одинаковыми соотношениями сторон.

Скриншот карусели Bootstrap 3