CSS / jQuery - 16x9 纵横比图像 - 匹配 div 尺寸答案

【问题标题】：CSS / jQuery - 16x9 aspect ratio image - Match div dimensionsCSS / jQuery - 16x9 纵横比图像 - 匹配 div 尺寸
【发布时间】：2019-04-12 22:37:24
【问题描述】：

我有一个简单的布局，我强制图像具有这样的 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 个 div .image2 和 .image3 具有与 .image1 div 相同的尺寸。

jQuery 是实现这一目标的方法吗？我可以用 CSS 做些什么来实现它吗？

【问题讨论】：

为什么不放“padding-bottom: 56.2%;”到其他 2 个 div 也？

标签： javascript jquery css aspect-ratio

【解决方案1】：

我认为这种方式不太可能。

我会创建一个透明图像，宽度为 16 像素，高度为 9 像素。把它放在内容中。然后你的 div 将永远是正确的大小。

然后你可以在上面放一个绝对图像。

【讨论】：