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>

相应地将4：3图像裁剪为16：9

1 个答案: