代码之家 › 专栏 › 技术社区 › fightstarr20

css/jquery-16x9纵横比图像-匹配div维度

aspect-ratio css jquery javascript

0

fightstarr20 · 技术社区 · 6 年前

我有一个简单的布局,我强迫一个图像有一个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 部门

jquery是解决这个问题的方法之一吗?我可以用css来实现它吗?

1 回复 | 直到 6 年前

1

0

Steve Maris 6 年前

我觉得这样不太可能。

我会创建一个透明的图像,16px宽,9px高。把这个放到内容里。然后你的div总是正确的大小。

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