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

Question

我正在尝试将任意大小的照片裁剪为120 x 120像素。 Bootstrap没有良好的圆圈裁剪，所以我使用了来自bootstrap 4和img-fluid + overflow:hidden的{​​{1}}组合来实现这一目标。

这适用于肖像照片（高度＆gt;宽度），但对于风景照片like this，结果为is this。

HTML：

border-radius

如何正确裁剪风景照片？

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%;

}