在 html 和 css 中圈出一个 div
[英]Circle a div in html and css
问题描述
我想圈出一个包含使用 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' );
4 个解决方案
解决方案1
2 2021-04-12 08:00:37
您可以使用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>
Output：
解决方案2
1 2021-04-12 07:49:14
如果你把border-radius设置为100% ，你应该得到一个圆（前提是height和width是相同的值。至于这种情况下的编程礼仪，我不知道……
解决方案3
0 2021-04-12 08:27:19
我猜你的网络摄像头代码会缩放以适应它的父元素......
- 将#camera 放在另一个div 中。
- 两者都应该具有相同的高度和宽度。
- 两者都应该隐藏溢出。
- 只有外部 div 应该是圆形的。 不是通过 Webcam.attach()
解决方案4
0 2021-04-12 08:30:22
从您发布的屏幕截图中，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上查看
CSS 或 HTML：将两个圆形 div 放在另一个 div 旁边
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.