我用手機作為視頻源采集，通過網路發送給PC，PC端用網頁顯示手機拍攝的視頻，我想盡量全屏顯示視頻，當手機橫屏拍攝時，全屏顯示正常；當手機豎屏拍攝時，只能顯示部分影像，所以我想高度全屏，橫向根據影像比例等比設定寬度，不知道CSS怎么設定，求大俠指點。
uj5u.com熱心網友回復：
height: 100vh;uj5u.com熱心網友回復：
css 除了 PX 像素以外 還要 vh 這個螢屏寬度這個東西 樓主可以搜搜看 樓上也是正解uj5u.com熱心網友回復：
謝謝回復。這個屬性我已經配置過了，高度和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;
}
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/173003.html
標籤：HTML(CSS)
上一篇：請教一下，為什么不建議定位布局？
下一篇：關于油猴腳本的小疑問