如何弯曲图像、iframe 和视频元素并保持纵横比？

Question

我有 5 个需要使用 flexbox 对齐的媒体项目（图像、视频和 iframe 中的 youtube 视频的混合）。当我删除视频和 iframe 时，一切正常。不知何故，当我添加视频/iframe 时，一切都被拉伸了，视频的宽度更大，视频元素的高度也很高。如何创建一行 5 个项目，高度和宽度都相同？

Answer 1

这使得视频或图像所在的容器具有相等的宽度。子 div 中的视频/图像需要缩放以适应父宽度到 100% 的宽度。 html:

<div class="parent">
   <div class="child" #video1>
     <!--place your image or video here, and make it use the whole width of the 'child' div-->
   </div>
   <div class="child" #image1>
      <!--place your image or video here, and make it use the whole width of the 'child' div-->
   </div>
</div>

css:

.parent {
   display: flex;
   width:100%; // or something similar;
}

.child {
  width: 20%; // 20*5=100% of parent;
}

或者，如果您不想在小型设备上显示 5 个视频/图像，您可以在子设备上设置 min-width 并在父设备上使用 flex-wrap: wrap：

<div class="parent">
   <div class="child" #image1>
      <!--place your image or video here, and make it use the whole width of the 'child' div-->
   </div>
   <div class="child" #video1>
      <!--place your image or video here, and make it use the whole width of the 'child' div-->
   </div>
</div>

然后是css：

.parent {
   display:flex;
   width:100vw;
   flew-wrap: wrap;
}

.child {
   width:20%;
   min-width: 200px;
}