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

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

  •  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总是正确的大小。

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