3

我有一个响应式设计网站，其中包含一个占据整个浏览器宽度的 HTML5 视频。width:100%;height:auto;无论浏览器窗口大小如何，视频的 CSS 都可以保持视频分辨率。

我想解决的问题是<video>在保持父 div 的同时调整父 div 的高度，width:100%这样父级始终与初始加载和调整大小时的比例相同<video>。

视频为 640x360。假设浏览器窗口为 1280x800。视频分辨率将翻倍至 1280x720 以适应其 100% 的宽度，但由于窗口的高度为 800，父 div 的高度将增加 80 像素。我想将该 div 的高度调整为 720 以匹配<video>.

我还在学习 JS，没有足够的智慧来解决这个问题。提前致谢。

这是一个可能有助于我解释的小提琴（调整窗口大小以复制问题。目标是在调整窗口大小时不显示任何红色背景）：http: //jsfiddle.net/alanweibel/UMstP/2/

4

1 回答 1

4

假设我对你的理解正确，这篇文章描述了一个小技巧，你可以在没有 Javascript 的情况下实现这一点：http ://webdesignerwall.com/tutorials/css-elastic-videos

如果您知道视频的比例，则可以计算容器的填充，然后将视频绝对定位在其中。我已经调整了你的小提琴以使用这种技术：http: //jsfiddle.net/SeykC/

<div class="wrap">
    <div class="container">
        <video id="video" controls="controls">
            <source type="video/mp4"
                    src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
        </video>
    </div>           
</div>
​

video {
    max-width: 100%;
    height: auto;
}

.container {
    background: red;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.container iframe,  
.container object,  
.container embed,
.container video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}​
于 2012-11-26T08:56:52.777 回答