html - 具有图像和 YouTube 嵌入宽高比的响应式图库

Question

这是一个很难正确表达的问题，所以我创建了一个 Fiddle 来更准确地表示我正在尝试做的事情:

http://jsfiddle.net/LAtPJ/

.thumbnailContainer.video_embed
{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.thumbnailContainer.video_embed iframe
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

以上代码非常适合非常漂亮、响应迅速的 YouTube 视频。但是……

如果您将其想象在媒体库的背景下，图像和视频应该以完全响应式设计共存。

会有一排又一排的媒体，图像和视频之间的纵横比可能会有所不同，因此我们会留下一些不再统一的东西。

实际上，YouTube 视频应该 100% 宽，但它的高度不应比图片的高度高或低。我以前有一个版本，它的宽度和高度都是固定的，所以非常简单，每个图像和每个 iframe 都是 200 x 200。现在，我想要一些更适合移动设备的东西，所以虽然我有我需要的图像，但视频没有。

有什么想法吗？

最终解决方案(如果有的话)最好只使用 CSS，不一定特定于 YouTube(一些视频将是其他服务，但主要通过 iframe 呈现，如 YouTube)。

你们太棒了，希望你们能想出一些很酷的东西。非常感谢。

Answer 1

100% 的高度具有挑战性，如您在此处所见:How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

如果可以的话，最好的选择可能是使用 jQuery。