如何使 YouTube 缩略图图像纵横比为 21:9

Question

<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet"/>
<div style="background: #eaeaea">
  <div class="column row">
    <div class="m-modal-video__column m-modal-video__column--primary">
     <div class="m-modal-video m-modal-video--primary-full-width">
      <div class="m-cta__vcenter"><h3 style="color: black; text-align: center;">Be Part of It</h3>
        <p style="color: black; text-align: center;">Choose an innovative degree that has been designed with your employability at its core.</p>
      </div>
    </div>
  </div>
  <div class="m-modal-video__column m-modal-video__column--secondary">
    <div class="m-modal-video m-modal-video--primary-full-width">
      <div class="m-cta__vcenter">
        <div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
          <a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
            <div class="m-modal-video__overlay m-modal-video__overlay--triangle">
              <div class="m-modal-video m-modal-video__triangle"></div>
            </div></a>
          </div>
          <div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
            <div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
            <button class="close-button" data-close aria-label="Close modal" type="button">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>  
        </div>
      </div>
    </div>
  </div>
</div>

我的网站上有一个模式，并使用以下内容显示缩略图：

http://img.youtube.com/vi/DxwrdB7A6-I/maxresdefault.jpg

问题是视频的宽高比为 21:9。我使用了以下样式，但仍然在图像的顶部和底部获得黑色信箱。有没有办法只显示没有黑色信箱的 YouTube 缩略图？

&__container {
    position: relative;
    height: 0;
    padding-bottom: 42.85714%;
    overflow: hidden;
    margin-bottom: 1rem;
    a img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

Answer 1

我已经修改了您的示例代码，添加了两个新的 CSS 规则，以对应于您的 HTML 已有的没有样式的类：

.m-modal-video__container--cinemascope 使用您之前尝试实施的 padding-bottom 技巧定义您的 Cinemascope-ratio 图像周围的容器。

.m-modal-video__container--cinemascope img 定义了上述容器内图像的大小和位置。知道您希望此图像保持其纵横比而不是拉伸，我删除了 height: 100% 规则（因此自动计算高度）并使用 top: 50% 和 transform: translateY(-50%) 技巧将图像垂直居中。

这一切都是必需的，因为尽管 YouTube 的比例为 21:9，但它仍然为您的视频制作了 16:9 的 JPG 缩略图，因此我们实质上是在使用这个技巧来隐藏图像中的黑条。我仍然看到一条小条穿过，但是如果您担心的话，您可以稍微调整您的padding-bottom 比率，或者将您的img 的width 增加到100% 以上。

.m-modal-video__container--cinemascope {
  position: relative;
  height: 0;
  padding-bottom: 42.85714%;
  overflow: hidden;
}

.m-modal-video__container--cinemascope img {
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet" />
<div style="background: #eaeaea">
  <div class="column row">
    <div class="m-modal-video__column m-modal-video__column--secondary">
      <div class="m-modal-video m-modal-video--primary-full-width">
        <div class="m-cta__vcenter">
          <div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
            <a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
              <div class="m-modal-video__overlay m-modal-video__overlay--triangle">
                <div class="m-modal-video m-modal-video__triangle"></div>
              </div>
            </a>
          </div>
          <div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
            <div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
            <button class="close-button" data-close aria-label="Close modal" type="button">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>