网络摄像头图像未显示完整尺寸

Question

我尝试流式传输网络摄像头，我希望在div中获得全宽。 不知怎的，它不适合我。我尝试使用%使其响应成为可能。

这是Fiddle

HTML

<div id="webcam">
    <div class="webcam-stream">
        <video src="blob:http://localhost/e814ab72-c414-4d97-9eca-b205c914fd6b" controls="" id="ME55u8ZS83mhoMloE2AE5OU9LrkDZdasaEfsKMO"></video>
    </div>
</div>


<h3>
    END RESULT
</h3>
<img src="https://cdn.pbrd.co/images/HPj7kAyuy.png">

CSS

#webcam {
    height: 35%;
    width: 40%;
}
.webcam-stream {
    width: 100%;
    height: 90%;
}
video {
    height: 100%;
    width: 100%;
}

Answer 1

在任何情况下，响应它应该有bakground，对于所有屏幕所有设备，或者你将在全尺寸模式下失真视频。 或者请阅读文章，并尝试制作 https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

没有办法 1）制作固定容器用于包装，顶部，左侧，底部，右侧设置为零，并为其添加绝对值。 2）尝试使用100vw和100vh，这在某些IE浏览器和旧版浏览器中无法正常工作

Answer 2

我不确定我100％理解您的问题，但是为了让您更容易看到需要更改哪些样式，为您的观点添加不同的背景颜色。

#webcam {
    height: 35%;
    width: 40%;
    background-color: red;
}
.webcam-stream {
    width: 100%;
    height: 100%;
    background-color: blue;
}
video {
    height: 100%;
    width: 100%;
    background-color: green;
}

在下面的示例中，将子元素的％值更改为10％，以显示我的意思。