Circle a div in html and css
Question
I want to circle a div that contains a live preview of the webcam using webcam.js. I have tried to make it into a circle, but only the sides became round.
This is the html for the webcam div:
<div id="camera" class="camera" ></div>
This is the css code:
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:
Webcam.set({
dest_width: 600,
dest_height: 600,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#camera' );
4 answers
solution1
2 2021-04-12 08:00:37
You can use border-radius: 100%; to make the div circle.
.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:
solution2
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…
solution3
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.
- Both should have equal height and width.
- Both should hide overflow.
- Only the outer div should be circular. Not the one passed Webcam.attach()
solution4
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 - Change the border to 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
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.