我有同样的问题this, https://stackoverflow.com/questions/27328009/100-height-or-100-width但我正在尝试这样做<video/>
元素。
有时我想做视频元素width: 100%
, 有时height: 100%
通过它的长宽比。
这是我的CSS
.remoteVideo-container {
position: fixed;
left: 0;
top: 0;
z-index: 0;
width: 100vw;
height: 100vh;
text-align: center;
background-color: rgb(45, 48, 53);
}
.remoteVideo {
object-fit: contain;
transform: scale(-1, 1);
}
这是我的 jsx
<div className="remoteVideo-container">
<video
className="remoteVideo"
autoPlay
ref={this.remoteVideo}
muted
></video>
</div>
Result:
您几乎明白了,但您错过了视频标签的大小。对象位置也很方便:
.remoteVideo {
height:100%; /* or is max-height:100%; */
width:100%; /* or is max-width:100%; */
object-fit: contain;
object-position:center;
transform: scale(-1, 1);
}
在整页中运行以测试调整大小或基于版本的行为的可能示例max-height
/max-width
100%
https://codepen.io/gc-nomade/pen/bGNzzNj https://codepen.io/gc-nomade/pen/bGNzzNj如果视频变得比屏幕大,则缩小视频。由您选择高度和宽度的值。
body {
margin: 0;
}
.remoteVideo-container {
position: fixed;
left: 0;
top: 0;
z-index: 0;
width: 100vw;
height: 100vh;
text-align: center;
background-color: rgb(45, 48, 53);
}
.remoteVideo {
height: 100%;
width: 100%;
object-fit: contain;
object-position: center;
transform: scale(-1, 1);
}
<div class="remoteVideo-container">
<video class="remoteVideo" autoplay muted poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg">
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm" />
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4" />
</video>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)