时间戳

首页 > 解决方案 > 尝试复制视频中看到的灵活横幅

javascript - 尝试复制视频中看到的灵活横幅

问题描述

我试图复制视频中显示的内容。我有 2 个 div 块。一个包含随机图像，另一个包含视频，我试图使它们尽可能灵活且与视频相同。我该如何处理？

我尝试使用弹性框将它们水平对齐，然后当窗口宽度较小时媒体查询它们垂直移动。但是我不能让它像视频中的那样缩小。

我不会上传 Html 代码，因为它只是一个包含图像和视频 div 的容器 div。

Here is my css : 

.container {
  max-width: 1400px;
  display: flex;
  justify-content: center;
}

.image {
  height: 45vh;
  width: 70vh;
}


.video {
  height: 45vh;
  width: 70vh;
}


@media screen and (max-width: 768px) {
  .container {
    flex-wrap: wrap;
  }

}

标签： javascripthtmlcssweb

解决方案

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="container">
       <div class="image"> <img src="./myimage.png"></img> </div>
       <div class="video"> <video src="./videoplayback.mp4"></video> </div>

    </div>
  
    <script src="script.js"></script>
  </body>
</html>

我已经按照您的描述设置了 HTML，css 如下所示：

.container {
  /* max-width: 1400px; */
   width: 90vw;
  display: flex;
  justify-content: center;
}

.image   {
  /* height: 45vh;
  width: 70vh; */
  width: 50%;
}

.image img  {
  /* height: 45vh;
  width: 70vh; */
  width: 100%;
}


.video  {
  /* height: 45vh;
  width: 70vh; */
  width:50%
}


.video video {
  /* height: 45vh;
  width: 70vh; */
  width:100%
}


@media screen and (max-width: 768px) {
  .container { 
    display: block ;
  } */

}

解释：

将容器的宽度设置为视口宽度的 90%，然后为图像和视频 div 提供 50% 的宽度（在这种情况下，将是其父级的 50% 或 90%）。在媒体查询中，只需将容器的显示设置为block. 我真的不知道图像或视频的高度应该是多少，所以我把它留给你来决定。

推荐阅读