在下面的代码中,我试图将视频居中放置到整个移动屏幕的高度,并希望将视频宽度均匀地溢出到左侧和右侧。
样式#0显示原始大小
样式1显示我尝试将视频居中,但视频向右移动
样式2显示了解决方法,视频处于完美的中心位置,但是,当我们网站的语言为RTL(右对齐语言,例如阿拉伯语)时,转换会引起问题。
我想找到一种无需进行任何转换即可正确居中视频的方法(即不使用样式#2),有什么好的建议吗?
cshtml:
<div class="videodiv">
<video class="webvideo"></video>
</div>
样式#0:
以自然比例显示原始视频
.videodiv {
text-align: center;
}
.videodiv .webvideo {
display: block;
margin: 0 auto;
}
样式1:
在此css下,当高度为100%时,视频宽度实际上溢出屏幕,左侧与屏幕左侧边框对齐,右侧溢出。
.videodiv {
text-align: center;
}
.videodiv .webvideo {
display: block;
height: 100%;
width: auto;
margin: 0 auto;
}
风格2:
.videodiv {
text-align: center;
}
.videodiv .webvideo {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
display: block;
height: 100%;
width: auto;
margin: 0 auto;
}
最佳答案
这样行吗?在Chrome,Firefox和Samsung Internet上进行了测试。
<html>
<head>
</head>
<body>
<div class="video_container">
<video class="video" src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" autoplay muted>
</video>
</div>
<style>
body {
padding:0px;
margin:0px;
}
.video_container, .video {
padding:0px;
margin:0px;
width:100%;
height:100vh;
object-fit: cover;
}
</style>
<script>
</script>
</body>
</html>
关于html - CSS:如何将高度和溢出宽度为100%的视频在移动屏幕上水平居中?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57300510/