html - 响应式水平 div 高度与嵌入的 youtube 不匹配

Question

我在两个水平 div 保持相同高度时遇到了一些问题。 如果两者都包含图像，那很好，但是当我尝试将 YouTube 视频嵌入其中一个 div 时，随着视口(viewport)减小，高度开始不匹配。

使用的代码是这样的:

<div class="IndexBanners">
<div class="bannerimages effect first">
<iframe class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/GfaiXgY114U" height="99%" width="100%">
</iframe>
</div>

<div class="bannerimages effect">
<a href="http://placehold.it"><img src="http://placehold.it/795x436"></a>
</div>
</div>

我已经设置了一个 fiddle ，这样你就可以看到这个问题。 https://jsfiddle.net/grvbc42o/1/

有什么建议吗？

Answer 1

默认情况下，图像垂直对齐 baseline 并且会在其父元素的底部留出一点空间。如果您为图像设置 vertical-align 并将视频的高度更改为 100%，它们将正确对齐。

.IndexBanners {
  display: flex;
  margin-top: 20px;
}

.bannerimages {
  flex: 1 0 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

@media (max-width:600px) {
  .IndexBanners {
    display: block;
  }
  .first {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
  .first iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

<div class="IndexBanners">
  <div class="bannerimages effect first">
    <iframe class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/GfaiXgY114U" height="100%" width="100%"></iframe>
    <!--a href="http://placehold.it"><img src="http://placehold.it/795x436"></a-->
  </div>
  <div class="bannerimages effect">
    <a href="http://placehold.it"><img src="http://placehold.it/795x436"></a>
  </div>
</div>