展示圆形的图片是很多常见需求之一,因为有Android开发经验,难免会从Android开发角度去考虑问题,Android中实现一张图片的圆形效果一般通过自定义view的clip处理,而HTML却很简单。虽然简单,但还是遇到一点坑,比如圆形化处理的图片并没有裁剪中间部分,而是默认左上角,毕竟昨天还在开心的写着Android,今天就开始摸索前端的东西,这种心情大家能理解吗[悲剧··]。
好了,废话不多说,来看看怎么实现的:
css代码:
.round_icon{ width: 34px; height: 34px; display: flex; border-radius: 50%; align-items: center; justify-content: center; overflow: hidden; }
Html:
<img src="../../source/images/what_ever.jpg" class="round_icon" alt="">
对,你没有看错,就是这么简单。由于现在前端是边看边做,所以实现方式可能比较幼稚或者浅显,欢迎大家指导一下更加适合的实现方式。