在下面的代码中,我试图将视频居中放置到整个移动屏幕的高度,并希望将视频宽度均匀地溢出到左侧和右侧。

样式#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;
}


html - CSS:如何将高度和溢出宽度为100%的视频在移动屏幕上水平居中?-LMLPHP

样式1:
在此css下,当高度为100%时,视频宽度实际上溢出屏幕,左侧与屏幕左侧边框对齐,右侧溢出。

.videodiv {
    text-align: center;
}

.videodiv .webvideo {
    display: block;
    height: 100%;
    width: auto;
    margin: 0 auto;
}


html - CSS:如何将高度和溢出宽度为100%的视频在移动屏幕上水平居中?-LMLPHP

风格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;
}


html - CSS:如何将高度和溢出宽度为100%的视频在移动屏幕上水平居中?-LMLPHP

最佳答案

这样行吗?在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/

10-12 13:00
查看更多