我的工作布局，页面顶部包含一些图像和视频背景的div，我有困难使其正确工作。当我制作第一个版本时，一切看起来都很好，但当我想让它在不同的浏览器窗口宽度下工作时，问题就开始出现了。如下所示
蓝色-带视频背景的DIV，绿色-图像，绿色-带橙色边框-图像应该贴在视频底部，其高度的一半超出视频，灰色-常规页面内容。
我遇到了两个问题，一个是我无法找出让图像（橙色边框）一直保持在视频底部的方法，其中一半不在视频区域。我希望它一直在那里。其他图像在不同的浏览器窗口宽度下不会造成太大的问题。
第二个是包含视频的DIV的背景，我将其设置为占位符，以防浏览器不支持视频标记。包含DIV不会像视频那样延伸到浏览器宽度。我希望它一直被视频覆盖-随着视频大小的变化而改变它的大小。
有人能建议如何修复它以达到预期的效果吗？
下面是代码（js fiddle上的页面区域宽度可能需要调整才能看到问题）
https://jsfiddle.net/yLmryL48/3/
body {margin: 0px;}
#video_box {
width:100%;
position:relative; height:720px;
background: url("http://i.imgur.com/X3mb6AD.jpg"); -webkit-background-size: cover;
-moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#video_overlays {position:absolute; text-align:center; width:100%;}
#vt_logo, #vt_url { display:block;}
#vt_logo, #vt_url{display: block; width:50%;}
#vt_logo img, #vt_url img{display: inline-block;}
#vt_logo img{margin:50px 0 0 50px;}
#vt_url img{margin:50px 50px 0 0;}
#vt_logo {text-align:left; float:left;}
#vt_url {text-align:right; float:right;}
#slogan img{padding-top:110px; width:70%; height: auto;}
#slogan2 img{padding-top:110px; width:60%; height: auto;}
#icons img{padding-top:110px; width:70%; height: auto;}
#ccontainer {width: 100%; position: relative;}
#cvideo, #cmessage {width: 100%; height: 360px; position: absolute; top: 0; left: 0;}
#cvideo video {width: 100%;}
.banner_top { width: 100%; display: block; padding-bottom:150px;}
#lipsum {width: 60%; margin: 0 auto;}<div class="banner_top">
<div id="video_box">
<div id="ccontainer">
<div id="cvideo">
<video preload="preload" autoplay="autoplay" loop="loop" muted poster="http://i.imgur.com/X3mb6AD.jpg">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div id="cmessage">
<div id="video_overlays">
<div id="vid_top">
<div id="vt_logo">
<img src="http://i.imgur.com/Od0DZBj.png">
</div>
<div id="vt_url">
<img src="http://i.imgur.com/ns80hYp.png">
</div>
<br style="clear:both;"/>
</div>
<div id="slogan">
<img src="http://i.imgur.com/JrOXRf2.png">
</div>
<div id="slogan2">
<img src="http://i.imgur.com/7mRLS9s.png">
</div>
<div id="icons">
<img src="http://i.imgur.com/XEEAcQx.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu tortor mi. Etiam bibendum pellentesque dignissim. Cras eu massa elit. Ut sit amet metus porta, hendrerit mauris at, elementum massa. Duis malesuada ac odio id faucibus. Mauris malesuada elementum dui luctus tempor. Integer in lacus vel risus dignissim vehicula eget vel purus. Sed non sollicitudin arcu. Cras ac ligula at nisl vulputate fringilla et non est. Etiam placerat volutpat eros id facilisis. Nunc sollicitudin ipsum ipsum, vestibulum rutrum sem dapibus quis.
</p>
</div>最佳答案
视频没有覆盖整个div，因为它保持了长宽比。如果您想拉伸它，可以使用CSS's object-fit。对于需要切掉50%的图像，可以使用translateY（50%）
CSS:
body {
margin: 0px;
}
#ccontainer {
position:relative;
width:100%;
height:550px;
background: url("http://i.imgur.com/X3mb6AD.jpg");
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#cvideo, #videooverlays {
position:absolute;
top:0;
left:0;
}
#cvideo, #videooverlays, video {
width:100%;
height:100%;
}
video {
image-fit:fill;
object-fit:fill;
}
#vid_top {
position:relative;
top:50px;
width:100%;
height: auto;
}
#vt_logo {float:left; margin-left:50px;}
#vt_url {float:right; margin-right:50px;}
#slogan {position:relative; top:70px; width:100%; height:auto; text-align:center;}
#slogan img {
width:50%;
}
#slogan2 {position:relative; top:70px; width:100%; height:auto; text-align:center;}
#slogan2 img {
width:50%;
}
#icons {position:absolute; bottom:0; width:100%; height:auto; text-align:center;}
#icons img {width:70%;transform:translateY(50%);}
#lipsum {width: 60%; margin: 0 auto;}
HTML格式：
<div id="ccontainer">
<div id="cvideo">
<video preload="preload" autoplay="autoplay" loop="loop" muted poster="http://i.imgur.com/X3mb6AD.jpg">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div id="videooverlays">
<div id="vid_top">
<div id="vt_logo">
<img src="http://i.imgur.com/Od0DZBj.png">
</div>
<div id="vt_url">
<img src="http://i.imgur.com/ns80hYp.png">
</div>
<div style="clear:both;"></div>
<div id="slogan">
<img src="http://i.imgur.com/JrOXRf2.png">
</div>
<div id="slogan2">
<img src="http://i.imgur.com/7mRLS9s.png">
</div>
</div>
<div id="icons">
<img src="http://i.imgur.com/XEEAcQx.png">
</div>
</div>
</div>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu tortor mi. Etiam bibendum pellentesque dignissim. Cras eu massa elit. Ut sit amet metus porta, hendrerit mauris at, elementum massa. Duis malesuada ac odio id faucibus. Mauris malesuada elementum dui luctus tempor. Integer in lacus vel risus dignissim vehicula eget vel purus. Sed non sollicitudin arcu. Cras ac ligula at nisl vulputate fringilla et non est. Etiam placerat volutpat eros id facilisis. Nunc sollicitudin ipsum ipsum, vestibulum rutrum sem dapibus quis.
</p>
<p>
Mauris interdum erat id posuere tempor. Vivamus suscipit nisi nec laoreet pulvinar. Vestibulum luctus libero vel tortor blandit maximus. Proin consequat massa id eros convallis rhoncus. Curabitur et erat finibus, sollicitudin mi ac, suscipit eros. Duis gravida velit elit, vel tempus elit malesuada in. Cras viverra, sapien sed tincidunt bibendum, mauris ligula tempor sem, vitae placerat libero mauris ut neque. Nullam ullamcorper erat est, at laoreet metus imperdiet nec. Nam sit amet gravida quam, nec hendrerit ante. Vestibulum eros ex, lacinia ut tincidunt quis, hendrerit ut felis. Suspendisse in orci sodales, tincidunt leo nec, lobortis dui. Integer ac magna purus. Praesent porta a dolor ut rutrum.
</p>
<p>
Curabitur ac sodales enim, vitae luctus eros. Mauris ac accumsan leo. Vestibulum tristique pretium nibh vel interdum. Duis vitae velit vel neque pretium condimentum. Vestibulum id lacus a nisl rhoncus tempus. Nullam varius quis tellus eget pharetra. Aliquam vitae purus id ex sodales bibendum sed quis dui. Ut bibendum neque turpis, ut vehicula massa egestas eget. Ut maximus sapien a leo porttitor dignissim. Suspendisse varius iaculis turpis non pulvinar. Morbi sit amet pellentesque nulla. Ut non ipsum quis mauris rhoncus luctus. Praesent posuere tincidunt nisl, at rutrum magna aliquet ac. Praesent et ex id sapien rhoncus ultricies non at orci. Donec vel iaculis metus. Donec convallis sit amet nisi id faucibus.
</p>
<p>
Phasellus id commodo risus, ut faucibus elit. Integer ornare blandit magna, ac pharetra neque porta nec. Maecenas consectetur, odio ac maximus fringilla, libero tellus egestas leo, in vulputate elit risus non nulla. Maecenas ac tempor sem. Phasellus placerat sollicitudin orci. Nunc sit amet tellus at sapien semper consequat at quis libero. Duis auctor in tortor sit amet congue.
</p>
<p>
Nunc at venenatis felis. Maecenas in lobortis tortor. Aenean id metus mattis, sodales dui non, ornare est. Donec nec condimentum lorem. Nullam ac nisi consequat, venenatis lorem quis, suscipit tortor. Cras a posuere ex, sodales pellentesque leo. Nulla nibh lectus, tincidunt non metus sit amet, rutrum fringilla quam. Cras id condimentum lectus. Donec et nulla turpis. Duis et nisi iaculis, aliquet orci sit amet, porta massa. Donec finibus vulputate lacus et mattis. Integer laoreet eros ut cursus porta. Proin id lectus elit. Proin imperdiet nec arcu at imperdiet.
</p></div>