CSS -背景视频似乎要缩放
CSS -背景视频似乎要缩放
提问于 2015-03-18 17:17:47
我正在尝试介绍一个背景视频到我的网站的一部分。
此部分的定义高度为530px。
然而，图像似乎过于放大了。
HTML：
<section class="home-banner">
<video poster="" preload="auto" loop="loop" autoplay="">
<source type="video/webm" src="https://a0.muscache.com/airbnb/static/Seoul-P1-4.mp4"></source>
<source type="video/mp4" src="https://a0.muscache.com/airbnb/static/Seoul-P1-4.webm"></source>
</video>
</section>CSS：
html {
min-height: 100%;
position: relative;
}
body {
margin: 0 0 150px;
}
body, h1, h2, h3, dt, dd {
margin: 0 auto;
padding: 0;
}
.home-banner {
display: block;
height: 530px;
overflow: hidden;
position: relative;
}
.home-banner video {
position: absolute;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 0;
}我从一个教程中复制了这个CSS。
这里有一个插入器：http://plnkr.co/edit/Rw4Wr4gWUru9U07ZufLM?p=preview
Stack Overflow用户
发布于 2015-03-18 21:47:47
删除min-width: 100%和min-height: 100%并添加max-width: 100%。您的代码将如下所示：
.home-banner video {
left: 50%;
max-width: 100%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}因为.home-banner有一个固定的宽度，你会在一个狭窄的屏幕上看到视频上下的空格。我建议将您的.home-banner类更改为以下内容(以便它可以随视频进行缩放)：
.home-banner {
display: block;
height: auto;
overflow: hidden;
position: relative;
padding-bottom: 56.7%; /* you can change this to match the width/height proportion of the video */
background: red;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29118028
复制相关文章
相似问题
腾讯云开发者
