我正在尝试将任何尺寸的照片裁剪为 120 x 120 像素。Bootstrap 没有很好的圆形裁剪，所以我使用了img-fluidbootstrap 4 和overflow:hidden+的组合border-radius来实现这一点。
这适用于肖像照片（高度 > 宽度），但对于像这样的风景照片，结果是这样的。
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("https://i.gyazo.com/da27f072059db48590e3b9da9d7789c2.jpg");
background-position:center;
background-size:cover;
height: 120px;
width: 120px;
border-radius: 50%;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句