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

Спасибо, что обратили внимание на мой вопрос, который состоит в следующем:

Возможно ли сделать блок (div) с авто шириной, у которого высота всегда равна ширине, только средствами html и css, без javascript?

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

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

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

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

Прямой связи в CSS между width и height нет, и нет возможности задать aspect ratio контейнера вместо одного из параметров или использовать какую то функцию, потому часто прибегают к помощи js.

Читайте также:  Как восстановить историю в ноутбуке

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

Если бы css функция attr поддерживалась свойствами width/height, то можно было бы попробовать читать ширину и высоту из одного и того же атрибута контейнера (как то так):