无法设置 React 网络摄像头高度

Question

我尝试使用“％”（尝试从JS页面和CSS设置）设置网络摄像头高度。

              <div>
                {!imgSrc && <div>                      
                <>
                    {/* className="video-stream" */}
                    <Webcam width={100 + '%'}    // height={50 + '%'} does not work
                            audio={false}
                            ref={webcamRef}
                        screenshotFormat="image/jpeg"
                       // forceScreenshotSourceSize="true"
                            videoConstraints={{
                                ...videoConstraints,
                                facingMode
                            }}
                        />
                    </>
                   
                    <Grid container={true} justifyContent='center' alignItems='center' spacing={1}>                       
                        <button onClick={capture}> Capture </button>
                </Grid>
              </div>}

CSS：

在CSS中，当我在像素中设置时，它可以在桌面上工作，但不能应用于移动设备。任何输入都将不胜感激。

用于移动和桌面：

 @media only screen and (min-width: 360px) and (max-width: 750px) {
    .video-stream {
        height: 210px;
        /* width: 290px; */
    }
 }
@media only screen and (min-width: 751px) {
    .video-stream {
        height: 400px;
       /* width: 530px; */
   }
}

Answer 1

您可以向网络摄像头组件添加 className 并在 css 文件中使用 %，然后根据需要将像素大小添加到父元素。例如，如果我将网络摄像头组件包装在 div 元素中，它可能类似于：

<div  className="video-stream">
          <Webcam
            className="webcam"
            audio={false}
            ref={webcamRef}
            screenshotFormat="image/jpeg"
          />
      </div> 

在 css 文件中：

.webcam{
  width: 100%;
  height: 100%;
}