我有一个拉伸响应的DIV,具有4:3填充全背景视频,在屏幕的水平和垂直中心。 我在这个DIV中还有其他Divs。我需要将它们放置在绝对位置,以将它们保持在不同分辨率的比例位置(%top和%left)中。 在纵向模式下,它工作正常,但在横向模式下,DIV垂直大于带有滚动条的屏幕的垂直视口,如您在(https://i.stack.imgur.com/cA09h.jpg中看到的那样。 我不知道我在做什么错。我会提供任何帮助。
预先感谢
html, body { margin: 0; padding: 0; width: 100%; height: 100%; display: table }
#borde { display: table-cell; text-align: center; vertical-align: middle;
border: 5px solid green; background-color: red; overflow: hidden;}
#container { position: relative; text-align: center; vertical-align: middle; border: 5px solid blue; background-color: green; margin: 0 auto; width: 100vw; height: 75vw; }
.video2 {
object-fit: fill; width: 100%; height:100%; margin: 0 auto;
}
.galpla {
background-image: url('http://www.maswebdesign.com.br/galpla.png');
-webkit-background-size: contain; -moz-background-size: contain;
-o-background-size: contain; background-size: contain;
background-position: center center;
width: auto; height: auto;
background-repeat: no-repeat;
}
@media (orientation: landscape) {
#container {
width: 133vh;
Height: 100vh;
}
}
#menu2 li {
float: left; display: inline; cursor: pointer;
color: #FFFFFF; font-weight: bold; white-space: nowrap;
}
#menu2 li:hover {
color: #009BFF;
}
#menu2 li a {
display: block; color: white; text-align: center;
padding: 7px 7px; text-decoration: none;
margin: 0px 5px 0px 5px;
}
<div id="borde">
<div id="container">
<video class="video2" poster="home_por.jpg" id="foo" autoplay muted loop preload="auto">
<source type="video/mp4" src="http://www.maswebdesign.com.br/video43.mp4">
</video>
<div id="menu2" style="position:absolute; top:1%; left:0%; width: 100%; height: 5%; font-size:1vw; z-index: 1; text-align: center; ">
<ul style="list-style-type: none; margin: 0px auto; border-color: #747A99 #224073 #3E547C #213E6E; border-style: solid; border-radius: 10px; box-shadow: inset 0.2em 0.1em 0.5em 0.4em #4D6086; list-style:none; display: inline-block; padding: 0">
<li><a href="main.html">Main</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
<li><a href="page5.html">Page5</a></li>
<li><a href="page6.html">Page6</a></li>
<li><a href="page7.html">Page7</a></li>
<li><a href="page8.html">Page8</a></li>
</ul>
</div>
<div class='galpla' style="position:absolute; top:1%; left:45%; width: 40%; height: 40%; font-size:1vw; z-index: 1;">
</div>
<div style="position:absolute; top:12%; left:29%; font-size:1.5vw; z-index: 1;">
<a style="color:white; text-decoration: none; cursor:pointer; " href="page1.html" >Page1</a>
</div>
</div>
</div>