html - 如何使我的元素(img 和视频)100% 高度并水平居中？

Question

这是我拥有的(1 和 2)以及我想要的(3)。 http://i.imgur.com/aXmBDL7.jpg

html 是...

<div>
    <img id="ship" src="images/shipBG1.png" alt="" />
</div>
<video autoplay loop poster="images/void.jpg" id="video">
    <source src="video/Video.webm" type="video/webm">
    <source src="video/Video.mp4" type="video/mp4">
</video>

CSS 是...

html, body, { width: 100%; }

#video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background: url(images/void.jpg) center center fixed;
    background-size: cover;
}

#ship {
 margin:auto;
 position:fixed;
 top:0;
 bottom:0;
 left:0;
 right:0;
 height: 100%;
 width: 100%;
}

Answer 1

要使这些元素的高度为 100%，您必须为其父元素设置高度。又名

div {
   height: (your height)
}

这不能是一个 % 除非它的父元素有一个设置的高度，比如 html,body { height: 100%} 或一个精确的 px

或

html, body {
   height: 100%;
}

而不是有 div

要获得 (3) 我会做的是给你的图像一个 min-width 并给 parrent 和 overflow: hidden;