响应式将 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 比率（9/16 = 56.25%）的基于 % 的填充顶部/底部来响应地使父高度为 16:9

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>