Question

我正在尝试向我网站的某个部分介绍背景视频。

此部分的定义高度为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

Answer 1

试试这个。设置最大宽度和最大高度

.home-banner video {

  max-height: 100%;
  max-width: 100%;

}

Answer 2

删除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;
}

CSS - 背景视频似乎放大

2 个答案: