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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

这适用于人像照片（高度>宽度），但对于风景照片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>

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

回答：

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

HTML：

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

CSS：

.agent-image{ 
    background-image:url("/wp-content/uploads/new2022/20220327voicc/190154057.jpg"); 
    background-position:center; 
    background-size:cover; 
    height: 120px; 
    width: 120px; 
    border-radius: 50%; 
}

以上是 Bootstrap 4 - 将图像裁剪成圆形 - 风景照片未被正确裁剪 的全部内容， 来源链接： utcz.com/qa/257909.html

回到顶部