0

这是我的演示，以说明我的意思： 

* {
  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？非常感谢！

澄清我想要实现的是：

在此处输入图像描述

在此处输入图像描述

4

1 回答 1

1

我能想到的最好的就是这个，我把所有东西都包在一个封面里，然后用一个伪红色封面。

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

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

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

作为旁注，这是我参与的一个答案，它显示了实现您想要的目标所需的条件：Scale element to scale with 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>

于 2017-06-09T22:40:21.477 回答