html - 如何将封面 div 放置到响应式 flex 容器中的对象适合图像上？

Question

这是我的演示来展示我的意思:

* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  width: 100%;
}

body {
  background: #333;
  margin: 0;
  padding: 0;
}

.content {
  display: flex;
  height: 100%;
  padding: 20px;
}

.panel {
  flex: 0 0 200px;
  display: flex;
  margin-left: 20px;
}

.widget {
  background: white;
  width: 100%;
  height: 100%;
}

.videoContainer {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
 }

.video {
  height: 50%;
  width: 50%;
  padding: 2px;
  position: relative;
}

.videoCover {
  position: absolute;
  background: red;
  opacity: 0.4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Default for videos */
}

<div class="content">
  <div class="videoContainer">
    <div class="video">
      <div class="videoCover"></div>
      <img width="600" height="400" src="http://thatgrapejuice.net/wp-content/uploads/2016/03/rihanna-thatgrapejuice-mariah-carey-billboard-600x400.jpg">
    </div>

    <div class="video">
      <img width="600" height="400" src="http://www.radioandmusic.com/sites/www.radioandmusic.com/files/images/entertainment/2015/09/28/rihanna-%2812%29.jpg">
    </div>

    <div class="video">
      <img width="600" height="400" src="http://m.buro247.com.au/thumb/600x960_0/images/640-rihanna-charity1.jpg">
    </div>

     <div class="video">
      <img width="600" height="400" src="http://hjb.hu/wp-content/uploads/2014/02/rihanna2.jpg">
    </div> 
  </div>
  
  <div class="panel">
    <div class="widget"></div>
  </div>
  
</div>  

垂直或水平调整浏览器大小，可以清楚地看到问题。所以基本上我想把红色封面准确地放在图像上。所以我假设我需要一个 div，它与图像的大小完全相同。看起来 object fit 很好地完成了它的工作，但正因为如此，我无法放置在红色 div 上。

纯css可以吗？我应该如何修改dom和css？非常感谢!

阐明我想要实现的目标是:

Answer 1

我能想到的最好的办法是，我将所有东西都包裹在一个封面中，然后为红色封面使用了伪造的。

我还添加了一些媒体查询，因为需要控制视频的宽度，所以它们不会变得比它们的比例高度更宽，如果有的话，可以让它们变窄。

您可能需要详细说明这些设置，也许还需要一两个查询，但我认为一个人可以很好地做到这一点，并且能够避免脚本的需要。

并且通过删除 object-fit，您还可以获得更好的跨浏览器解决方案。

作为旁注，这是我参与的一个答案，它显示了实现您想要的目标所需的条件:Scale element proportional to Background Cover/Contain .它有一个脚本和一个 CSS 版本

* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  width: 100%;
}

body {
  background: #333;
  margin: 0;
  padding: 0;
}

.content {
  display: flex;
  height: 100%;
  padding: 20px;
}

.panel {
  flex: 0 0 200px;
  display: flex;
  margin-left: 20px;
}

.widget {
  background: white;
  width: 100%;
  height: 100%;
}

.videoContainer {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
 }

.video {
  height: 50%;
  width: 50%;
  padding: 2px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.videoCover {
  position: relative;
  overflow: hidden;
}
.video:nth-child(1) .videoCover::after {
  content: '';
  position: absolute;
  background: red;
  opacity: 0.4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-aspect-ratio: 600/400) {
  .video:nth-child(1) .videoCover::after {
    width: 80%;
  }
  img {
    width: 80%;
  }
}
@media (min-aspect-ratio: 800/400) {
  .video:nth-child(1) .videoCover::after {
    width: 60%;
  }
  img {
    width: 60%;
  }
}
@media (min-aspect-ratio: 1000/400) {
  .video:nth-child(1) .videoCover::after {
    width: 40%;
  }
  img {
    width: 40%;
  }
}

<div class="content">
  <div class="videoContainer">
    <div class="video">
      <div class="videoCover">
        <img width="600" height="400" src="http://thatgrapejuice.net/wp-content/uploads/2016/03/rihanna-thatgrapejuice-mariah-carey-billboard-600x400.jpg">
      </div>
    </div>

    <div class="video">
      <div class="videoCover">
        <img width="600" height="400" src="http://www.radioandmusic.com/sites/www.radioandmusic.com/files/images/entertainment/2015/09/28/rihanna-%2812%29.jpg">
      </div>
    </div>

    <div class="video">
      <div class="videoCover">
        <img width="600" height="400" src="http://m.buro247.com.au/thumb/600x960_0/images/640-rihanna-charity1.jpg">
      </div>
    </div>

    <div class="video">
      <div class="videoCover">
        <img width="600" height="400" src="http://hjb.hu/wp-content/uploads/2014/02/rihanna2.jpg">
      </div>
    </div> 
  </div>
  
  <div class="panel">
    <div class="widget"></div>
  </div>
  
</div>