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

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

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

1. Создать HTML структуру из 2 блоков:

   <!-- 16:9 (отношение между шириной и высотой) -->
   <div class="item-responsive item-16by9">
     <div class="content"></div>
   </div>
   
   <!-- Блоки, имеющие другую высоту -->
   <!-- 4:3 -->
   <div class="item-responsive item-4by3">
     <div class="content"></div>
   </div>
   <!-- 2:1 -->
   <div class="item-responsive item-2by1">
     <div class="content"></div>
   </div>
   <!-- 1:1 -->
   <div class="item-responsive item-1by1">
     <div class="content"></div>
   </div>
   

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

   .item-responsive {
     position: relative; /* относительное позиционирование */
   }
   .item-responsive:before {
     display: block; /* отображать элемент как блок */
     content: ""; /* содержимое псевдоэлемента */
     width: 100%; /* ширина элемента */
   }
   .item-16by9 {
     padding-top: 56,25%; /* (9:16)*100% */
   }
   .item-responsive>.content {
     position: absolute; /* абсолютное положение элемент */
     /* положение элемента */
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
   }
   
   /* При необходимости (для блоков, имеющих данные классы) */
   .item-4by3 {
     padding-top: 75%; /* (3:4)*100% */
   }
   .item-2by1 {
     padding-top: 50%; /* (1:2)*100% */
   }
   .item-1by1 {
     padding-top: 100%; /* (1:1)*100% */
   }
   

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

Демо карусели

HTML разметка карусели:

<div id="carousel" class="carousel slide" data-ride="carousel" style="max-width: 600px; margin: 0 auto;">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
    <li data-target="#carousel" data-slide-to="3"></li>
    <li data-target="#carousel" data-slide-to="4"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="item-responsive item-16by9">
        <div class="content" style="background: url(assets/examples/img/carousel_1.jpg);"></div>
      </div>
      <div class="carousel-caption">
        Слайд 1
      </div>
    </div>
    <div class="item">
      <div class="item-responsive item-16by9">
        <div class="content" style="background: url(assets/examples/img/carousel_2.jpg);"></div>
      </div>
      <div class="carousel-caption">
        Слайд 2
      </div>
    </div>
    <div class="item">
      <div class="item-responsive item-16by9">
        <div class="content" style="background: url(assets/examples/img/carousel_3.jpg);"></div>
      </div>
      <div class="carousel-caption">
        Слайд 3
      </div>
    </div>
    <div class="item">
      <div class="item-responsive item-16by9">
        <div class="content" style="background: url(assets/examples/img/carousel_4.jpg);"></div>
      </div>
      <div class="carousel-caption">
        Слайд 4
      </div>
    </div>
    <div class="item">
      <div class="item-responsive item-16by9">
        <div class="content" style="background: url(assets/examples/img/carousel_5.jpg);"></div>
      </div>
      <div class="carousel-caption">
        Слайд 5
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

CSS код карусели:

.item-responsive {
  position: relative; /* относительное позиционирование */
}
.item-responsive:before {
  display: block; /* отображать элемент как блок */
  content: ""; /* содержимое псевдоэлемента */
  width: 100%; /* ширина элемента */
}
.item-16by9 {
  padding-top: 56.25%; /* (9:16)*100% */
}
.item-responsive>.content {
  position: absolute; /* абсолютное положение элемент */
  /* положение элемента */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover !important;
}