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 дела.

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

Answer 1

Я не думаю, что это возможно.

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

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