Bootstrap 4 - 将图像裁剪成圆形 - 风景照片未被正确裁剪

Question

我试图将任何尺寸的照片裁剪成120 x 120像素。 Bootstrap不会带有很好的圆形裁剪，所以我使用bootstrap 4的img-fluid和overflow:hidden + border-radius的组合来实现此目的。

这适用于人像照片（高度>宽度），但对于风景照片like this，结果is this。

HTML：

<div style="overflow:hidden; height:120px; width:120px; border-radius:50%;"> 
    <img class="img-fluid" src="picture.png" alt='Agent picture' /> 
</div> 

如何剪裁风景照片是否正确？

Answer 1

不知道这是否符合您的需求，但您可以使用background-image属性来完成此操作。这是一个工作CodePen。

HTML：

<div class="agent-image"></div> 

CSS：

.agent-image{ 

    background-image:url("https://i.gyazo.com/da27f072059db48590e3b9da9d7789c2.jpg"); 
    background-position:center; 
    background-size:cover; 
    height: 120px; 
    width: 120px; 
    border-radius: 50%; 

}