Question

我正在构建一个网页以嵌入流媒体视频。我希望水平和垂直居中视频，同时调整视频（基于浏览器大小，而不是手动）视频以填充可用的屏幕空间。 / p>

这是棘手的部分;此页面的导航高度为60px，视频必须为16：9。我希望能够设置宽度为800px，高度为450px的最小宽度和最小高度。视频不应该与导航重叠，所以如果它有点偏离垂直中心，那很好。如果需要，我可以使用jQuery，虽然CSS（3）会更好。这个页面主要供私人使用，所以我并不担心跨浏览器的兼容性。

我不知道如何在这种复杂程度上实现这一目标。我的想法是创建一个填充页面其余部分的div，并将其置于具有绝对定位的div中。不幸的是，我不知道如何使其可调整大小并保持正确的宽高比。如果有帮助，我将同时使用UStream和Justin.tv进行此项目。

感谢。

编辑1：我无法弄清楚如何在减去导航的同时使底部div填充页面的其余部分。我认为height:100%;会覆盖它，但遗憾的是整个页面的100％，包括60px导航。

Answer 1

使用此jQuery插件：FitVids

使用CSS3 Flexbox进行水平和垂直居中（有限的浏览器支持，但正如您所说，这不是问题）

这是代码（没有简化的供应商前缀）：

.parent{
      display: box;
      box-orient: horizontal;
      box-pack: center;
      box-align: center;
}

将其应用于视频的父级。

现在导航不应该中断定心，但如果确实如此，您始终可以absolute定位导航栏。将在顶部剪辑一些视频，但60px并不是那么糟糕。

Answer 2

试试这段代码：

<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>

Answer 3

我将如何做到这一点：

var videoElement = $("#IDofYourVideo");

function SizeUpVideo(elm) {
    var W = parseInt($(window).width()),   //get browser width
        H = parseInt($(window).height()),  //get browser height
        ratio = 16/9,                      //set ratio
        videoH = H-60,                     //subtract 60px
        videoW = H * ratio;                //set width according to ratio

    if (videoW > W) {videoW=W; videoH=W*(1/ratio);} //if width is more than screen, do it the other way around
    if (videoW >= '800' || videoH >= '450') {
        elm.css({top: (H-videoH+60)/2, left: (W-videoW)/2, height: videoH, width: videoW});
    } else {
        elm.css({top: 60, height: 450, width: 800});
    }
};

SizeUpVideo(videoElement);

$(window).bind("resize", function() {
    SizeUpVideo(videoElement);
});

小提琴：http://jsfiddle.net/bAXwK/

居中DIV并根据浏览器尺寸进行调整

3 个答案: