视频的横竖版显示问题

[ABitTrouble]

我用手机作为视频源采集，通过网络发送给PC，PC端用网页显示手机拍摄的视频，我想尽量全屏显示视频，当手机横屏拍摄时，全屏显示正常；当手机竖屏拍摄时，只能显示部分图像，所以我想高度全屏，横向根据图像比例等比设置宽度，不知道CSS怎么设置，求大侠指点。

[weixin_50944805]

height: 100vh;

[初心不变时过迁]

css 除了 PX 像素以外 还要 vh 这个屏幕宽度这个东西 楼主可以搜搜看 楼上也是正解

[ABitTrouble]

谢谢回复。这个属性我已经配置过了，高度和Viewport的高度一致，width我不设置，想让宽度随视频分辨率等比变化，初始时是正常的，当我手机的横竖屏切换几次后，宽度越来越窄。具体设置如下：
[data-component='Peers'] {
min-height: 100%;
width: 100%;

+desktop() {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;//row
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

+mobile() {
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

> .peer-container {
overflow: hidden;

AppearFadeIn(100000ms);

+desktop() {
flex: 0 0 auto;//0 0 auto
height: 100vh;
initial-scale: 1;
margin: 6px;
border: 1px solid rgba(#fff, 0.15);
box-shadow: 0px 5px 12px 2px rgba(#111, 0.5);
transition-property: border-color;
transition-duration: 0.35s;

&.active-speaker {
border-color: #fff;
}
}

+mobile() {
flex: 100 100 auto;
order: 2;
min-height: 25vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

&.active-speaker {
order: 1;
}
}
}
}