如何在响应灵活容器中将封面div放置在对象适合的图像上？

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，它与图像的大小完全相同。 似乎对象适合它的工作做得很好，但正因为如此，我不能放在红色div上。

可以做纯css吗？我该如何修改dom和css？ 非常感谢你！

澄清我想要达成的目标是：

Answer 1

我能想出的最好的是，我将所有内容包裹在封面中，然后使用伪作为红色封面。

我还添加了一些媒体查询，因为需要控制视频的宽度，因此它们不会比它们的比例高度更宽，如果是，则使它们的宽度变小。 / p>

您可能需要详细说明这些设置，可能还需要一两个查询，但我认为可以做到这一点非常好，并且能够避免使用脚本。

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

作为旁注，以下是我参与的答案，其中显示了实现目标所需的内容：Scale element proportional to Background Cover/Contain。它有一个脚本和一个CSS版本

＆＃13;

＆＃13;

* {
  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%;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;