代码之家 › 专栏 › 技术社区 › Valachio

引导4-将图像裁剪成圆形-未正确裁剪横向照片

bootstrap-4 twitter-bootstrap css

Valachio · 技术社区 · 8 年前

我正在尝试将任何大小的照片裁剪成120 x 120像素。Bootstrap没有很好的循环裁剪,所以我使用了 img-fluid 从引导4和 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>

如何正确裁剪风景照片?

1 回复 | 直到 8 年前

infamoustrey 8 年前

不确定这是否符合您的需要,但您可以使用 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%;

}

推荐文章

xajetin · 导航不更改滚动上的颜色

3 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

4 年前

Bryan Santos · 固定表头与引导

4 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

4 年前

tym · 根据用户偏好显示字段

4 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

4 年前

Pavel · 当验证DIV可见时,引导网格会移动

8 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

8 年前

Alexander David · 折叠卡打开,然后立即再次关闭

8 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

8 年前