如何使我的元素（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%}否則不能為％

要么

html, body {
   height: 100%;
}

而不是div

得到（3），我要做的是給你的圖像一個min-width並賦予其父對象和overflow: hidden;