响应式地将 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%)

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>

响应式地将 4:3 图像裁剪成 16:9

Responsively crop 4:3 image into 16:9

css

youtube-data-api