时间戳

首页 > 解决方案 > CSS / jQuery - 16x9 纵横比图像 - 匹配 div 尺寸

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

问题描述

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

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

标签： javascriptjquerycssaspect-ratio

解决方案

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

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

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

推荐阅读