用不失真的图像填充一个圆圈答案

【问题标题】：Fill a cirle with an image without distortion用不失真的图像填充一个圆圈
【发布时间】：2018-04-23 03:19:34
【问题描述】：

我有一个网站，用户可以在其中上传未知尺寸的照片。我正在尝试找出如何制作固定大小的图像圆圈。我可以创建圆圈和我的图像，但我不知道如何防止图像在放入圆圈时扭曲。有没有办法用任何图像填充固定大小的圆圈而不会扭曲图像（最好是居中）？我在这里做了一个小提琴。非常感谢。

#circle {
  border-radius: 50%;  
  width: 100px;
  height: 100px;
}

&lt;div&gt;&lt;img src="https://source.unsplash.com/MUnoV4capRk/600x300" alt="" id="circle"&gt;&lt;/div&gt;

【问题讨论】：

标签： html css

【解决方案1】：

你可以使用object-fit

#circle {
  border-radius: 50%;  
  width: 100px;
  height: 100px;
  object-fit: cover;
}

&lt;div&gt;&lt;img src="https://source.unsplash.com/MUnoV4capRk/600x300" alt="" id="circle"&gt;&lt;/div&gt;

更多信息请阅读object-fit in css

【讨论】：

【解决方案2】：

图像和容器的尺寸不同。图像比包含元素大，这就是为什么图像看起来失真。

你应该使用，object-fit: cover

#circle {
  object-fit: cover;
  border-radius: 50%;  
  width: 100px;
  height: 100px;
}

&lt;div&gt;&lt;img src="https://source.unsplash.com/MUnoV4capRk/600x300" alt="" id="circle"&gt;&lt;/div&gt;

在此处阅读有关object-fit 属性的更多信息：object-fit css

【讨论】：

【解决方案3】：

最简单的方法是用它作为背景：

.circle {
  border-radius: 50%;  
  width: 100px;
  height: 100px;
  background-size:cover;
  background-position:center;
}

&lt;div class="circle" style="background-image:url(https://source.unsplash.com/MUnoV4capRk/600x300);"&gt;&lt;/div&gt;

【讨论】：