Question

我正在设计一个介绍页面。我在该页面上放置了背景和视频片段，我也希望在移动设备上获得桌面视图。我尝试了以下代码：

css：

.trailer-content {
    max-width: 75%;
    width: 600px;
    margin-left: auto;
    margin-right: auto;

}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: fixed;
    bottom:40px !important;
    width: 50%;
    height: 50%;
    margin-left: auto !important;
    margin-right: auto !important;
}
#background {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
    width:100%;
    height:100%;
}

html：

<div id="background">
     <img src="img/bg.jpg" class="stretch" alt="" />
</div>
<div class="trailer-content">
     <div class="video-container"><iframe width="420" height="315"     src="//www.youtube.com/" frameborder="0" allowfullscreen></iframe>
     </div>
</div>

输出结果

背景显示拉伸
视频在桌面上是正常的，但在移动视图中，视频也会拉伸到一定的大小。

Answer 1

自适应背景图片：

html { 
  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSvctt0I--skoKQVfuVt-i4Et6vQ5ve7lXPkLy9sTElCWLKh1Ps) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<强> See demo

自适应视频：

HTML：

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

CSS：

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<强> See demo

Answer 2

我必须再次注意从不使用ID进行样式化

正确解决问题

最简单的方法是使用@media rule w3school link

在这种情况下，您将拥有适用于同一类但在不同情况下的任意数量的不同规则。

这种方式比拉伸视频或背景要好得多，因为你可以完全控制所有元素。它们的行为就像你希望它们在不同的设备上表现一样。

Answer 3

从#background移除高度：100％...因此图像的宽度将延伸100％，但保持正确的尺寸。

但是，我认为你把它作为身体的背景更好，就像这样：

body{background:url(img/bg.jpg);
background-repeat:no-repeat;
background-size:100% auto;}

对于保存视频的视频帧标签，重新设置高度也可以正确缩放视频。

您还可以使用meidatypes设置特定的宽度，高度等，请在此处查看有关响应式网页设计（RWD）的更多信息http://www.hongkiat.com/blog/responsive-web-tutorials/

介绍页面中的响应图像和视频

3 个答案: