html - 仅使用 CSS 去除 YouTube HQ 默认图像中的黑条？

Question

(进行了一些搜索但找不到完全相同的问题/答案)

我在我的页面上显示 YouTube 的 hqdefault 缩略图。但是，我注意到它们是 480 x 360，这意味着它们对于所有 16:9 比例的视频(占大多数)都有黑色的顶部和底部条

例如:http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg

我的问题是:

我希望图像自动缩放以适合其容器的宽度，这将是总窗口宽度的百分比(这意味着我事先不知道确切的像素值)。并隐藏黑条，当然不要扭曲图像的比例。

这可以仅使用 CSS 来完成吗(希望有良好的浏览器支持)？ -- 我可以假设所有图像都应该是 16:9(对于那些其他比例的图像，我可以剪掉它的一部分，并且只以 16:9 显示它的一部分)。

谢谢

(PS:我有一个JS解决方案，但是我想看看它在CSS中是否可行。JS解决方案是用JS获取容器的宽度，然后按照16:9的比例设置容器的大小。然后拉伸(stretch)图像并将其定位在中心，隐藏它的额外区域——这基本上隐藏了它的顶部和底部黑条)

Answer 1

我找到了这个 solution .这是一个 example :

您将 div 设置为 width:100%，它现在将拉伸(stretch)到容器大小，在本例中为 body。然后设置 padding-bottom: 56.25%; 以获得 16:9 的比例。

现在设置 overflow: hidden; 来隐藏 div 的内容并设置 top: -16.75%; 来隐藏上面的黑色 strip 。

HTML

<div class="stretchy-wrapper">
    <div>
        <img src="http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg" style="overflow: hidden; width:100%;"/>
    </div>
</div>

CSS

body {
    width: 70%;
    margin: 8px auto;
}

div.stretchy-wrapper{
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;
    background: blue;
    overflow: hidden;
}

div.stretchy-wrapper > div {
    position: absolute;
    top: -16.75%; bottom: 0; left: 0; right: 0;
}