作出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>