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

【问题标题】：Responsive images and video in intro page介绍页面中的响应式图像和视频
【发布时间】：2014-04-25 04:01:46
【问题描述】：

我正在设计一个介绍页面。我在该页面上放置了背景和视频片段，并且我还想在移动设备中查看桌面视图。我尝试了以下代码：

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>

输出结果

背景被拉伸
视频在桌面端正常，但在移动端视图中，视频也被拉伸到一定大小。

【问题讨论】：

标签： html css video responsive-design background-image

【解决方案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

【讨论】：

【解决方案2】：

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

正确解决您的案件

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

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

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

【讨论】：

【解决方案3】：

从#background 中移除 height:100%... 这样图像的宽度将拉伸 100%，但保持正确的尺寸。

但是，我认为最好将它作为背景放在 body 中，如下所示：

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

对于包含视频的视频帧标签，删除高度也可以正确缩放视频。

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

【讨论】：