如何解决在 html 和 css 中圈出一个 div
我想用 webcam.js 圈出一个包含网络摄像头实时预览的 div。我试着把它做成一个圆形,但只有边变成了圆形。
这是网络摄像头 div 的 html:
<div id="camera" class="camera" ></div>
这是css代码:
body
{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.camera
{
width: 450px;
height: 450px;
border-radius: 50%;
overflow: hidden;
transform: rotateY(180deg);
}
这是我的js代码:
Webcam.set({
dest_width: 600,dest_height: 600,image_format: 'jpeg',jpeg_quality: 90
});
Webcam.attach( '#camera' );
解决方法
您可以使用 border-radius: 100%;
制作 div 圆。
.camera
{
width: 450px;
height: 450px;
border-radius: 100%;
overflow: hidden;
transform: rotateY(180deg);
}
更新:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body
{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.camera
{
width: 450px;
height: 450px;
border-radius: 100%;
overflow: hidden;
background:red;
}
</style>
</head>
<body>
<div id="camera" class="camera" ></div>
</body>
</html>
输出:
,如果你把border-radius
设置为100%
,你应该得到一个圆圈(前提是height
和width
是相同的值。至于编程礼仪在这样的情况下这个,我不知道……
我猜你的网络摄像头代码会缩放以适应它的父元素......
- 将#camera 放在另一个 div 中。
- 两者的高度和宽度应该相等。
- 两者都应该隐藏溢出。
- 只有外部 div 应该是圆形的。 不是通过 Webcam.attach() 的那个
从您发布的屏幕截图来看,CSS 似乎没有问题,而是网络摄像头提要纵横比问题,请尝试使用相对值调整 webcamJS 的值:
CSS - 将边框更改为 100%
body
{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.camera
{
width: 450px;
height: 450px;
border-radius: 100%;
overflow: hidden;
transform: rotateY(180deg);
}
JS - 将高度设置为相对值
Webcam.set({
dest_width: 600,dest_height: 600/1.33500,image_format: 'jpeg',jpeg_quality: 90
});
Webcam.attach( '#camera' );
您可以在 codepen https://codepen.io/godpers/pen/ExZQpEQ
上查看版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。