Html 网络摄像头图像未显示完整大小

我试图流我的网络摄像头，我想得到它在整个宽度内的div。 不知怎么的，这对我不起作用。我尝试使用

%

使其能够响应

这是一个

---

HTML

---

在任何情况下，对于响应，它都应该有bakground，对于所有屏幕和所有设备，否则在全尺寸模式下会出现视频失真。 或者，请阅读文章，并尝试

几乎没有办法 1） 为包装器创建固定容器，将顶部、左侧、底部、右侧设置为零，然后为其子级添加绝对值。

---

2） 尝试使用100vw和100vh，这在某些IE和较旧的浏览器中不起作用

我不确定我是否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;
}

在下面的示例中，a将子元素的%值更改为10%，以向您展示我的意思

---

您的视频的纵横比是多少？就像是4:3、16:9等等？@MichaelCoker我不知道是什么相位。但是我想要的是，黑色图像必须等于父div。如果你看到控件的宽度正确，但里面的图像不正确。请在此处尝试CSS-@michaelocker，正如你在prntscr中看到的那样，它会从父div中浮动。我高亮显示div，找出纵横比是多少。您需要了解这一点，才能创建一个全屏响应视频。如果你告诉我这是什么，我可以为你想出一个解决办法。否则，祝你好运：）正如你现在在prntscr上看到的，我想要黑色等于绿色，红色等于绿色（黑色是视频图像）

#webcam {
    height: 35%;
    width: 40%;
}
.webcam-stream {
    width: 100%;
    height: 90%;
}
video {
    height: 100%;
    width: 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;
}