作出4：3图像回应16：9

Question

我试图作出反应裁剪一个YouTube 4：3缩略图图像，其中包括黑条，直到16：9，但我没有达到确切的宽高比。出于某种原因，尽管是1080p视频，但我可以获得的最高分辨率图像是640x480。

HTML：

<figure class="sixteen-nine-img"> 
    <img src="https://i.ytimg.com/vi/kTnvan3vws4/sddefault.jpg" alt="Video: Lincoln Center Festival 2017: George Balanchine's JEWELS"> 
</figure> 

CSS：

figure.sixteen-nine-img { 
    width: 100%; 
    overflow: hidden; 
    margin: 0; 
} 

figure.sixteen-nine-img img { 
    display: block; 
    margin: -21.875% 0; 
    width: 100%; 
} 

演示：CodePen

Answer 1

您可以绝对位置和中心在容器中的图像，然后让家长高度16：9响应通过使用代表16：9比例（9/16 = 56.25％）的基于百分比的填充顶部/底部

figure.sixteen-nine-img { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding-top: 56.25%; 
 
    position: relative; 
 
} 
 
figure.sixteen-nine-img img { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100%; 
 
    transform: translate(-50%, -50%); 
 
}

<figure class="sixteen-nine-img"> 
 
    <img src="https://i.ytimg.com/vi/kTnvan3vws4/sddefault.jpg" alt="Video: Lincoln Center Festival 2017: George Balanchine's JEWELS"> 
 
</figure>