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>

我正在尝试使其他两个div .image2和.image3具有与.image1 div相同的尺寸。

jQuery是否是实现这一目标的方法？我可以使用CSS来实现它吗？

Answer 1

我认为不可能真的这样。

我将创建一个透明图像，其宽度为16px，高度为9px。将其放在内容中。然后您的div将始终是正确的大小。

然后，您可以在其上放置一个绝对的图像。