html5 显示圆形图片,《小白HTML5成长之路40》怎样显示圆角图片

这几日，随着小白对HTML5认识的提升，他自己没事浏览网页的时候总会注意一些特殊的展示效果，让他印象最深刻的一个效果就是用户头像了，一个矩形的图片怎么就显示成圆形了呢？一上午没想明白，下午看着老朱没什么事，就去向老朱请教：“朱哥！网页上的图片怎么能显示成圆角呢？特别是正圆形是怎么做出来的啊？”

老朱随口说道：“border-radius啊！之前我们已经用过几次了啊！”

小白说：“这不是控制容器圆角的么？图片也可以控制么？”

老朱说：“讲图片的时候我不是告诉过你了么？肯定是没好好听，图片标签img也是一个容器，它是一个放图片的容器，在img里面显示什么图片是靠src属性来决定的。既然是容器你不是就可以用border-radius来控制了么？你试试！”

小白高兴的说道：“真的成圆角了啊！我要把他变成正圆，是不是圆角设置成它宽度的一半就可以了？”

老朱说：“你先试试吧！试玩就知道了！”

“不行啊！这是怎么回事？”

老朱跟小白说：“css的圆角属性值最多是边的一半！你的图片宽比高大，所以圆角值最多位高的一半！你可以先尝试把图片的宽高设置成一样的看看！”

“果然变成正圆了，可是这样的话图片就有变形了，如果小头像的话还好说，大头像可就不好看了！”

老朱说道：“所以现在很多网站头像上传的时候都会让用户截取一个正方形的图片生成头像，就是为了方便进行圆角控制！”

小白说：“有没有折中的方法？假如网站没有用户设置正方形头像的功能，还不想让图片变形呢？”

老朱说：“正圆显示的肯定是一个高和宽一样的区域，所以图片被截取肯定是不可避免的了。你可以给图片外部套一个div容器，让这个div容器的宽度高度一致，并且设置超出隐藏。这样设置一下div的圆角就可以了！你试试看”

小白做好以后说道：“我又发现一个问题，div设置宽和高一样以后，图片如果高比宽小，图片高度得跟父容器高度一致才能出来效果！而图片高比宽大，则需要设置图片宽度和父容器宽度一致。我觉得要把它完善必须使用js来判断图片宽和高的比例进行动态设置。”

“嗯，你可以试试！”

聪明的大家，你们有没有什么更好的图片圆角方式呢？

举报/反馈

html5 显示圆形图片,《小白HTML5成长之路40》怎样显示圆角图片相关推荐

《小白H5成长之路19》if判断语句的一些用法
"小白,你面临过选择么?" "面临过啊,今天上午就在犹豫是骑自行车还是坐公交,出门一看天太冷,所以就做公交来上班了." "如果不冷你就骑自行车来了,对 ...
《小白H5成长之路50》js与PHP配合完成图片上传功能
"小白!还记得之前我们说过的jQuery中的ajax异步加载数据的方法么?" "记得,之前的代码我这里还有,你看看是不是这个?" 老朱:"恩,没错,通 ...
科研小白的成长之路——博一年度总结
2020年9月,背负行囊,襟怀炽热之心,带着对未来的憧憬,我跨越大半个中国从广西老家来到哈工大,开始了科研求学之旅.时光荏苒,想想自己从博士入学时的懵懂,到现在逐渐适应"博士僧"生 ...
怎么截取图片大小 html,详解html2canvas截图不能截取圆角图片的解决方案
以前我们只能通过其他的截图工具来截取图像.现代浏览器的功能已经越来越强,随着H5的逐渐普及,浏览器本身就可以截图啦.html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边 ...
一个 Blink 小白的成长之路
来自:阿里巴巴中间件写在前面写过 Blink SQL 的同学应该都有体会,明明写的时候就很顺滑,小手一抖,洋洋洒洒三百行代码,一气呵成.结果跑的时候,吞吐量就是上不去.导致数据延迟高,消息严重积压 ...
从零开始学习演讲|职场小白演讲成长之路
很早以前就承诺格格在读书会上做一次关于演讲的线下交流,但一直忙于工作,没有时间准备.于是在写PPT的间隙,抽空完成此文,希望能够帮助愿意学习演讲的同学. - 1 - 什么样的演讲才是好的演讲? 好 ...
android中图片圆角,Android中实现圆角图片的几种方法
Android中实现圆角图片有多种姿势,不知你解锁了几种? 方法一:setXfermode法此种方式就是再new一个相同尺寸的bitmap,然后使用paint.setXfermode(new Por ...
html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
《小白HTML5成长之路38》插入视频的功能好简单
"朱哥,现在视频站好火啊!那些视频是怎么放到网页上进行播放的呢?一定很麻烦吧!" 老朱:"不麻烦,HTML5标准下,一个video标签就搞定了." 小白:&qu ...
html鼠标移入显示图片动画,HTML5+CSS3鼠标移入移出图片生成随机动画_html/css_WEB-ITnose...
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转上下移动缩放由于时间关系我就不一步步解析各段代 ...

html5 显示圆形图片,《小白HTML5成长之路40》怎样显示圆角图片

html5 显示圆形图片,《小白HTML5成长之路40》怎样显示圆角图片相关推荐

最新文章

热门文章