响应式地将 4:3 图像裁剪为 16:9答案

【问题标题】：Responsively crop 4:3 image into 16:9响应式地将 4:3 图像裁剪为 16:9
【发布时间】：2017-03-15 20:56:16
【问题描述】：

我正在尝试以响应方式将包含黑条的 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

【问题讨论】：

这样吗？ codepen.io/anon/pen/PpJOaQ
@MichaelCoker 就是这样！谢谢！

标签： css youtube-data-api

【解决方案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>

【讨论】：