用div，right和bottom div

Question

我的视频div有一个响应宽度的问题。

有3张图片需要贴在视频元素上

• 绿色（左侧）
• 橙色（右侧）
• 红色（底边）

问题在于

• 如果我制作一个大背景图像，它将被拉伸，箭头会失去它的纵横比。

我怎样才能实现这种效果？同时保持充分的响应能力。

Answer 1

这提出了一个有趣的挑战。我确定其他人写的东西可能更有用。我只想练习书面沟通技巧。

我发现了一种帮助解决问题的方法：https://codepen.io/viewtifulmoejoe/pen/yPvQmz?editors=1100

我正在使用此代码来满足SO的代码要求。

<div class="viewer_component">
  <div class="viewer_component__bgImg">
    <img src="https://i.imgur.com/rQmri0X.jpg" alt="">
  </div>
  <div class="viewer_component__video">
   <a href="#">
    <img src="https://placehold.it/854x480" alt="" class="viewer_component__video--src">
   </a>
  </div>
</div>

• 我用这张图片来制作方法原型：https://imgur.com/rQmri0X
  黑色轮廓用作视频周围的虚框，类似于您发布的图像。
• 我使用占位符图片来模仿视频并使用传统YouTube视频的尺寸。

该方法要求背景图像中的虚框与视频容器的比例匹配。这是我知道的唯一方法，使得效果在没有插件/库/ javascript的情况下按预期工作。

请告诉我这是否可以帮助您应对这一挑战。如有任何问题，我很乐意帮忙。

更具伸缩性的方法是保存多个图像。 1表示视频容器的左/上/右/下，并相对于视频定位它们。这种方法需要一点技巧。

Answer 2

使用flexbox或display: table;时，这不应该太难。看一下下面的例子：

.container {
    display: flex;
}

.container div {
    flex: 1 1 auto;
    border: 1px solid #FFF;
    background: #CCC;
}

<div class="container">
  <div></div>
  <div style="flex: 0;">
    <iframe width="300" height="100"></iframe>
  </div>
  <div></div>
</div>

底部的红色条只是一个块元素。您可以使用背景图像来应用图像模式。

Answer 3

有几种方法可以做到：

• 使用flexbox
• 使用display: table;，display: table-row，display:table-cell构建一个div表格
• 使用表格