Спасибо, что обратили внимание на мой вопрос, который состоит в следующем:
Возможно ли сделать блок (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, то можно было бы попробовать читать ширину и высоту из одного и того же атрибута контейнера (как то так):