Question

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

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

<div><img src="https://source.unsplash.com/MUnoV4capRk/600x300" alt="" id="circle"></div>

Answer 1

图像失真，因为您试图将600x300图像放入100x100容器中。这不是由圆圈引起的，而是由图像的尺寸引起的。如果您调整图像大小以使其具有方形宽高比，则您不会遇到此问题。

或者，您可以使用object-fit属性更改图像的修改方式以适合您的容器。在这种情况下，您可能需要return render(request, 'Index.html', {"posts": posts})。

＆＃13;

object-fit: cover

＆＃13;

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

＆＃13;

Answer 2

您可以使用> unMaybes [Maybe Nat, Maybe Int, Maybe (Maybe String)] [Nat, Int, Maybe String] : Vect 3 Type

＆＃13;

object-fit

＆＃13;

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

＆＃13;

有关详细信息，请参阅object-fit in css

Answer 3

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

您应该使用object-fit: cover

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

<div><img src="https://source.unsplash.com/MUnoV4capRk/600x300" alt="" id="circle"></div>

在此处详细了解object-fit属性：object-fit css

Answer 4

最简单的方法是将其用作背景：

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

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