在 html 和 css 中圈出一个 div
[英]Circle a div in html and css
问题描述
I want to circle a div that contains a live preview of the webcam using webcam.js.
我想圈出一个包含使用 webcam.js 的网络摄像头实时预览的 div。 I have tried to make it into a circle, but only the sides became round.我试图把它做成一个圆圈，但只有侧面变成了圆形。
This is the html for the webcam div:这是用于网络摄像头 div 的 html：
<div id="camera" class="camera" ></div>
This is the css code:这是 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);
}
This is my js code:这是我的 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
You can use border-radius: 100%;您可以使用border-radius: 100%; to make the div circle.使 div 循环。
.camera
{
width: 450px;
height: 450px;
border-radius: 100%;
overflow: hidden;
transform: rotateY(180deg);
}
Updated:更新：
<!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: Output：
解决方案2
1 2021-04-12 07:49:14
If you set border-radius to 100% , you should get a circle (provided height and width are the same values. As for the programming etiquette in a situation like this, I don't know…如果你把border-radius设置为100% ，你应该得到一个圆（前提是height和width是相同的值。至于这种情况下的编程礼仪，我不知道……
解决方案3
0 2021-04-12 08:27:19
I'm guessing your webcam code scales to fit it's parent element...我猜你的网络摄像头代码会缩放以适应它的父元素......
- Put #camera inside another div.将#camera 放在另一个div 中。
- Both should have equal height and width.两者都应该具有相同的高度和宽度。
- Both should hide overflow.两者都应该隐藏溢出。
- Only the outer div should be circular.只有外部 div 应该是圆形的。 Not the one passed Webcam.attach()不是通过 Webcam.attach()
解决方案4
0 2021-04-12 08:30:22
From the screenshot you posted, there seems to be no issue with the CSS but rather with the webcam feed aspect ratio, try adapting the values of webcamJS with relative values:从您发布的屏幕截图中，CSS 似乎没有问题，而是使用网络摄像头的长宽比，尝试使用相对值调整 webcamJS 的值：
CSS - Change the border to 100% 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 - Set the height to a relative value JS - 将高度设置为相对值
Webcam.set({
dest_width: 600,
dest_height: 600/1.33500,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#camera' );
You can check it on codepen https://codepen.io/godpers/pen/ExZQpEQ你可以在codepen https://codepen.io/godpers/pen/ExZQpEQ上查看
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.