CSS / jQuery - изображение с соотношением сторон 16x9 - соответствует размерам div

Question

У меня есть простой макет, где я заставляю изображение иметь соотношение сторон 16x9, как это ...

.image1 {
  position: relative;
  padding-bottom: 56.2%;
}

.image1 img {
 position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.image2 {
  background:lightgreen;
}

.image3 {
  background:lightgrey;
}

<div class="container">

  <div class="image1">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/2012_Suedchinesischer_Tiger.JPG/1200px-2012_Suedchinesischer_Tiger.JPG" />
  </div>

  <div class="image2">
   Section 2
  </div>

  <div class="image3">
  Section 3
  </div>

</div>

Я пытаюсь сделать так, чтобы другие 2 деления .image2 и .image3 имели те же размеры, что и .image1 div.

Является ли jQuery способом решения этой проблемы? Есть ли что-нибудь, что я могу сделать с помощью CSS для достижения этой цели?

Answer 1

Думаю, не совсем так.

Я бы создал прозрачное изображение шириной 16 пикселей и высотой 9 пикселей. Поместите это в содержание. И тогда ваш div всегда будет правильного размера.

Тогда вы можете поместить абсолютное изображение поверх него.