I'm trying to responsively crop a YouTube 4:3 thumbnail image, which includes black bars, down to 16:9, but I'm not achieving the exact aspect ratio. For some reason, despite being a 1080p video, the highest res image I can get is 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%;
}
Demo: CodePen