Question

使用对象拟合，如果我将高度设置为100vh，则它可以正常工作，尽管如果将其更改为其他值，它不再保持正确的大小，而是随着窗口的缩小而缩小以填充空间。

是否可以像100vh一样保持比例，但实际上不占用全部可用空间？我同意将视频的一部分剪掉，但我似乎无法弄清楚如何使其正常工作。

基本上我想要的是在移动100vh上很好，我在视频上方叠加了文字，因此可以使用额外的空间。但是在大屏幕上，此视频上有太多未使用的空间（另一个在整个网站上也是如此，但可以使用相同的方法进行修复），我想将其缩小到接近50到65占总大小的百分比。

下面是我当前在视频中使用的CSS，还有一个指向视频实时站点的链接，因为我不相信我可以将其上传到SO。

https://tsukiyonocm.github.io/test/

#services {
  position: relative;
}

#servicesVid {
  height: 100vh;
  width: auto;
  position: relative;
  -o-object-fit: cover;
  object-fit: cover;
}

Answer 1

您的问题不是很清楚，但是我建议您使用Media查询为不同的媒体类型/设备应用不同的样式。例如，如果您想为大屏幕设备（例如笔记本电脑）设置特定样式，则必须使用：

@media screen and (min-width: 1400px) {
 //your style for these  devices that have 1400px+ screen width
}

更改对象适配盖的高度

1 个答案: