sass - 如何使 YouTube 缩略图图像纵横比为 21:9
问题描述
<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">×</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%;
}
}
解决方案
我已经修改了您的示例代码以添加两个新的 CSS 规则,以对应于您的 HTML 已有的没有样式的类:
.m-modal-video__container--cinemascope
padding-bottom
使用您之前尝试实施的技巧定义您的 Cinemascope-ratio 图像周围的容器。
.m-modal-video__container--cinemascope img
定义上述容器内图像的大小和位置。知道您希望此图像保持其纵横比而不是拉伸,我删除了height: 100%
规则(因此自动计算高度)并使用top: 50%
and 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">×</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- javascript - 为 JavaScript 数组的 filter() 方法创建基于可迭代的替代方案
- apache-spark - 从 spark 写入 neo4j 时,Spark-neo4j 连接器自动转换时区
- python - Python:根据日期列出 Azure 容器中的 blob
- android - 在 Kotlin 协程中进行无限循环的最佳实践是什么?
- oracle - 甲骨文形式的指纹或面部扫描仪
- selenium - Selenium ChromeOptions 的含义
- shell - shell for循环读取目录内的文件
- javascript - 为什么我的 Nuxt 中间件即使在突变后也无法获得更新的存储状态?
- react-native - React Native 项目--如何在 reactnative 应用中创建 ios 和 android 文件夹
- c# - 转换字典
数据结构到二维字符串数组数据结构