I use mobile phone as a source of video acquisition, sent to the PC through the network, PC with web page shows the video phone, I want to try to full screen video, when the mobile landscape photography, full screen is normal; When mobile vertical screen shot, show only a part of the image, so I'd like to highly full-screen, transverse proportion according to the image geometric set width, don't know how to set the CSS, o master,

CodePudding user response:

Height: 100 vh;

CodePudding user response:

CSS except PX pixels and the vh the screen width the things the original poster can search the upstairs is also positive solutions

CodePudding user response:

Thank you for your reply, I have configured the attribute, the height and the height of the Viewport is consistent, I don't set the width, want to let the width change with geometric video resolution, initial is normal, when my phone somehow screen switch a few times, width narrow, specific Settings is as follows:
[data - component='Peers'] {
Min - height: 100%;
width: 100%;

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

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

The peer - container {
overflow: hidden;

AppearFadeIn (100000 ms);

{+ desktop ()
Flex: 0 0 auto;//0 0 auto
Height: 100 vh;
Initial - scale: 1;
Margin: 6 px;
Border: 1 px solid rgba (# FFF, 0.15);
Box - shadow: 0 px 5 px 12 px 2 px rgba (# 111, 0.5);
The transition - property: border - color;
The transition - duration: 0.35 s;

& . The active - speaker {
Border - color: # FFF;
}
}

Mobile (+) {
Flex: 100 100 auto;
Order: 2;
Min - height: 25 vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

& . The active - speaker {
Order: 1;
}
}
}
}