使用flex自适应拼接视频和图片

Question

使用flex，我想显示视频和图片的自适应马赛克，所以每次我添加新的视频或图片时，Tile都会自动调整。

这是我正在寻找的例子：

[注意] ：所有瓷砖的宽度和高度都相同：）

以下是HTML代码：

[注意] ：我没有找到如何在StackOverflow上进行工作展示。

＆＃13;

＆＃13;

.flex-container {
  display: flex;
  background-color: Green;

  flex-wrap: wrap;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
}

.flex-container > div {
  background-color: pink;
  height:100%;
}
  
.flex-container > div > div.image {    
  background-image: url("https://www.gettyimages.ca/gi-resources/images/EnterpriseSolutions/StandOut_Creative.jpg");
  background-position: center right;
  background-size: cover;
  width:100%;
  height:100%;
}

＆＃13;

<div class="flex-container">
  <div style="width:50%">
    <div class="image"></div>
  </div>
  <div style="width:50%">
    <div class="image"></div>
  </div>
  <div style="width:50%">
    <div class="video">
      <video src="http://link.to.video.mp4" autoplay loop muted></video>
    </div>
  </div>
  <div style="width:50%">
    <div class="image"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

所以在wrap flex-container中，我有＆＃34; image＆＃34;图像在背景中的div。和＆＃34;视频＆＃34;格。

我找到了自动调整图像的方式，但我不知道如何为视频做同样的事情。

您是否找到了在包装容器中自动调整视频的方法？

感谢。

Answer 1

你的flexbox代码是可以的（默认情况下，弹性方向是按行，它包裹在多行上以提供马赛克效果）。主要问题是主容器中的position属性。我删除了固定位置属性以及相关容器。

/* Main Container */ 
.flex-container {
    display: flex;
    /* flex-direction: row; <-- Value by default */ 
    flex-wrap: wrap;
    width: 100%;
    z-index: 10;
    background-color: green;
}

我也删除了主容器和直接子容器上的height。至于具有<div>类的.image的高度，我将百分比值替换为vh值。让我们定义马赛克中的元素，使用值100vh获取视口的整个高度。

/* Image Container */ 
.flex-container > div > div.image {    
    background-image: url("https://www.gettyimages.ca/gi-resources/images/EnterpriseSolutions/StandOut_Creative.jpg");
    background-position: center right;
    background-size: cover;
    width:100%;
    height:100vh; /* <-- Height is full height of the viewport */
}

让我们来解决视频问题。维护HTML代码中的条件，我为视频容器和视频元素定义了CSS，两者的宽度和高度与<div>类.image元素的宽度和高度相同（100％）宽度，100vh高度）。

要调整视频以获取容器的整个大小，我在其中使用object-fit属性，值为fill。

/* Video Container */ 
.flex-container > div > div.video {
    width: 100%; 
    height: 100vh;
}

/* Video Element */ 
.flex-container > div > div.video video {
    width: 100%;
    height: 100vh; 
    object-fit: fill; /* <-- The video fills the entire video container */
}

代码段

马赛克在下面的代码段中有效。请注意：

• 出于审美原因，我在整个页面中添加了保证金零和填充零。
• 视频元素包含示例MP4视频。
• 您的原始代码有四个马赛克元素，下面的代码段有六个。除了四个原始元素外，还有两个。你可以玩它，看看马赛克用现在的元素调整自己。

* {
   margin: 0;
   padding:0;
   box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  z-index: 10;
  background-color: green;
}

.flex-container > div {
  background-color: pink;
}

.flex-container > div > div.image {    
  background-image: url("https://www.gettyimages.ca/gi-resources/images/EnterpriseSolutions/StandOut_Creative.jpg");
  background-position: center right;
  background-size: cover;
  width:100%;
  height:100vh;
}

.flex-container > div > div.video {
    width: 100%; 
    height: 100vh;
}

.flex-container > div > div.video video {
	  width: 100%;
    height: 100vh; 
	  object-fit: fill;
}

<div class="flex-container">
  <div style="width:50%">
    <div class="image"></div>
  </div>
  <div style="width:50%">
    <div class="image"></div>
  </div>
  <div style="width:50%">
    <div class="video">
      <video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay loop muted></video>
    </div>
  </div>
  <div style="width:50%">
    <div class="image"></div>
  </div>
  <div style="width:50%">
    <div class="image"></div>
  </div>
  <div style="width:50%">
    <div class="video">
      <video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay loop muted></video>
    </div>
  </div>
</div>