使图片适合 css 圆圈答案

【问题标题】：make picture fit in css circle使图片适合 css 圆圈
【发布时间】：2021-06-21 06:16:23
【问题描述】：

有没有一种方法可以让图片自动适合 css 圆圈？ Fx 如果用户添加图片有 500px * 500px，但圆圈是 100px * 100px。当我现在上传图片时，图片只是填满屏幕，而不是停留在圆圈内。

<html>
<head>
  <style>


  #circle
 {
   border-radius:50% 50% 50% 50%;  
   width:100px;
   height:100px;
}
 </style>

</head>
<body>
   <img src="skin-tone.jpg" id="circle">
</body>
</html>

【问题讨论】：

代码似乎运行良好。看看这里 - jsbin.com/zanubuloki/edit?html,css,output。或者可能是我不完全理解这个问题。
您尝试此代码的浏览器和版本是什么？
stackoverflow.com/questions/25685227/…

标签： html css

【解决方案1】：

试试这个 CSS

#circle {
    background: skin-tone.jpg;
    background-size: cover;
    border-radius:50% 50% 50% 50%;
    width:100px;
    height:100px;
}

【讨论】：

@Julie24 我只是好奇，但你使用的是什么浏览器？因为您之前的代码在 Chrome 中运行良好。
你好 JordyV。我用铬。在我添加背景大小和背景肤色后，它就可以工作了。我在想如果我必须把圆放在中心，我应该怎么做？有边距还是？
您可以尝试通过在父元素中设置以下 CSS 来使其居中：text-align: center;
@Julie24 找到您的解决方案：stackoverflow.com/questions/25685227/…
谢谢。这也有效： display: block;左边距：自动；右边距：自动

【解决方案2】：

有多种方法可以做到这一点，但下面给出了一种简单的方法：

 #circle{
     background: url("imageUrl.jpg");
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-position: center;
     border-radius: 50%;
     height: 100px;
     width: 100px;
}

【讨论】：

【解决方案3】：

你需要做的是为 img 元素设置一个 max-width 和 max-height 。例如，你可以告诉你的 img 是 max-width:100px 和 max-height:100px。

【讨论】：

我可以看到这里的答案是负数。我使用高度：100px；宽度：100px；那和最大高度和最大宽度有什么区别？
由于您的图像具有固定大小100px，它的大小永远不会改变，除非您使用 javascript 执行此操作（或更改您的代码）...所以您不需要创建 @987654324 @ 或 min 限制。
有时我在 Safari 浏览器上遇到了麻烦。