css - 视频嵌入和图像在一行中的高度相等

Question

我有两个 50% 宽度的 div。一个是简单的图像，另一个是 YouTube 嵌入。

我想要实现的是两个元素（图像和视频）的高度相同。我需要这在响应式上同样有效。

我试图使用http://embedresponsively.com/ css 进行视频嵌入，但无法理解如何使其正常工作。

这是我想做的：

这是我的jsfiddle：

<div class="content">
<div class="left">
    <img src="http://placehold.it/756x560/2cb7c0/ffffff">
  </div>
  <div class="right">
    <div class='embed-container'><iframe src='https://www.youtube.com/embed/C7dPqrmDWxs' frameborder='0' allowfullscreen></iframe></div>
  </div>
</div>

https://jsfiddle.net/ujddekdf/

Answer 1

您将无法调整 youtube 视频的大小，因为它的比例是由提供商设置的。最简单的解决方案是调整图像大小，使其与视频具有相同的比例。然后它也适用于响应式：

 <img src="http://placehold.it/756x424/2cb7c0/ffffff">

https://jsfiddle.net/ujddekdf/1/