Question

有没有办法可以在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>

Answer 1

试试这个CSS

ggplot(fakedata, aes(x=x,y,y)) + geom_point() + facet_grid(. ~ grp) +
   annotation_custom(grobTree(textGrob(expression(paste(a == 5, ', ', b == 6)), x=.5, y=.5)))

Answer 2

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

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

Answer 3

您需要做的是为img元素设置max-width和max-height。例如，您可以说您的img属于max-width:100px和max-height:100px。

使图片适合css圈

3 个答案: