如何在固定纵横比 16/9 的情况下保持图像 100% 的视口宽度

Question

我对该主题进行了很多研究，并且解决方案 - 必须使用视差效果（使用 GSscrolltrigger） - 对我来说似乎有点复杂（因为我必须根据 @media css 更改父 div 的高度. 就我而言，img（16/9 比例）必须在引导流体容器 div 内的子 div 中。

有没有一种动态的方法或其他更好更简单的方法？

<div class="container-fluid parallax-main d-flex align-items-center justify-content-center">
    <div class="parallax-image" style="background: url('pathToImage') no-repeat; background-size:cover;"></div>
    <div class="parallax-overlay">...</div>
</div>

.parallax-main {
  height: 50vmin;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.parallax-image { 
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;
  opacity: 1;
}
.parallax-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
  max-width: 1140px;
  position: relative;
  z-index: 2;
}

@media (min-width:768px) {
  .parallax-main { height: 55vmin; }  
}

@media (min-width:992px) {
  .parallax-main { height: 60vmin; }  
}

@media (min-width:1100px) { 
  .parallax-main { height: 70vmin; }
}

@media (min-width:1200px) { 
  .parallax-main { height: 80vmin; }
}

@media (min-width:1200px) { 
  .parallax-main { height: 90vmin; }
}

@media (min-width:1400px) { 
  .parallax-main { height: 100vmin; }
}

Answer 1

在.parallax-image 上尝试width: 100vw