在 html 和 css 中圈出一个 div答案

【问题标题】：Circle a div in html and css在 html 和 css 中圈出一个 div
【发布时间】：2021-07-07 07:04:46
【问题描述】：

我想圈出一个包含使用 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' );

【问题讨论】：

标签： html css webcam.js

【解决方案1】：

从您发布的屏幕截图来看，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

【讨论】：

它现在可以工作了，但我只是对将高度设置为相对值感到好奇。设置该值是否意味着网络摄像头流将遵循 div 高度？
并非如此，如果您手动设置值，大小将被您设置的值覆盖。如果您希望流遵循 DOM 大小，则根本不必设置任何大小值（请参阅webcamJS docs）。
另外，我更新了 codepen，所以现在它只是将 4:3 的纵横比分配给流。

【解决方案2】：

我猜你的网络摄像头代码会缩放以适应它的父元素...

将#camera 放入另一个div。
两者应具有相同的高度和宽度。
两者都应该隐藏溢出。
只有外部 div 应该是圆形的。 不是通过 Webcam.attach() 的那个

【讨论】：

【解决方案3】：

你可以使用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%，但还没有完全圈起来。
我已经检查了 HTML 和 CSS。它工作正常。也许其他文件或js上有一些。我已经用屏幕截图更新了我的上述答案。请检查一下。

【解决方案4】：

如果你把border-radius设置为100%，你应该得到一个圆圈（前提是height和width是相同的值。至于这种情况下的编程礼仪，我不知道......

【讨论】：

您好，我尝试将其设置为 100%，但只有边是圆形的。
能否发下相关代码。我试过了，它对我有用……
我把代码改成了.camera { width: 450px; height: 450px; border-radius: 100%; overflow: hidden; transform: rotateY(180deg); }
嗯。好吧，当我尝试这段代码时，在添加 border: black solid 2px （或一些边框属性）之前，我不会得到任何边框，但这显然不是你得到的，因为你实际上有一个边框。可以发个截图或者边框吗？抱歉没有帮助……
您好，这是图片链接：imgur.com/4a8K6FU