图片圆角并居中显示解决方案
2018-11-26 07:59:30来源:博客园 阅读 ()
1、图片圆角显示
例如(非常简单):
HTML:
<img src="mao.png" />
CSS:
img{ border-radius: 10px; }
如果图片只为圆角,这种方式确实没问题,但如果还要加上居中的效果,这种方式就有问题,下面会说明。
2、图片居中显示(铺满父容器且不变形)
效果图如下:
PS:为了实现上图居中的效果,单靠CSS是不行的,还需要JS处理。
例如:
HTML:
<div class="rd-box" style="width:200px;height:200px;overflow:hidden;"> <img src="mao.png" onload="centerThisImg(this, 200, 200)"/> </div>
CSS:
.rd-box{ position: relative; display: inline-block; border-radius: 10px; } .rd-box img{ display: block; border-radius: 10px; }
JS:
//图片自适应填充,并居中显示。 function centerThisImg(el, maxWidth, maxHeight){ var $img = $(el), img = $img[0]; var imgHeight = img.naturalHeight, imgWidth = img.naturalWidth, finalWidth, finalHeight, tsffix = ''; var rm = maxWidth / maxHeight, r = imgWidth / imgHeight; if(r < rm){ finalWidth = maxWidth; finalHeight = maxWidth / r; tsffix = 'translateY(-' + (finalHeight - maxHeight) / 2 + 'px)'; } else { finalHeight = maxHeight; finalWidth = maxHeight * r; tsffix = 'translateX(-' + (finalWidth - maxWidth) / 2 + 'px)'; } $img.css({width: finalWidth, height: finalHeight, transform: tsffix}); }
PS:图片的长宽是不定的,为了让图片不变形的铺满父容器,需要重新计算图片长宽,并计算居中需要位移的距离。
从这一点就可以看到我说的问题,在CSS中我是加上圆角的样式,但实际上却没有圆角效果。
这是因为当我们把图片居中(不变形)时,我们看到的现在居中的四角,其实是图片中间部位,真正图片的四角早在不可见的地方。
所以,想让居中的图片再有圆角效果,得另外想办法。
3、遮挡法模拟出圆角
我们可以用四个内凹三角形,遮挡在图片四角上(居中后的),让人误以为是图片圆角了。
例如(结合居中的完整代码):
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>正方形居中显示并且圆角</title> <style> img{ height: 200px; } label{ display: block; } .rd-box2{ position: relative; display: inline-block; } .rd-box2 img{ display: block; } .rd-box2 .left-top, .rd-box2 .right-top, .rd-box2 .left-bottom, .rd-box2 .right-bottom{ position: absolute; width: 10px; height: 10px; z-index: 1; } .rd-box2 .left-top{ top: 0; left: 0; background: radial-gradient(20px at right bottom,transparent 50%,#F4F4F4 50%); } .rd-box2 .right-top{ top: 0; right: 0; background: radial-gradient(20px at left bottom,transparent 50%,#F4F4F4 50%); } .rd-box2 .left-bottom{ bottom: 0; left: 0; background: radial-gradient(20px at right top,transparent 50%,#F4F4F4 50%); } .rd-box2 .right-bottom{ bottom: 0; right: 0; background: radial-gradient(20px at left top,transparent 50%,#F4F4F4 50%); } </style> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> //图片自适应填充,并居中显示。 function centerThisImg(el, maxWidth, maxHeight){ var $img = $(el), img = $img[0]; var imgHeight = img.naturalHeight, imgWidth = img.naturalWidth, finalWidth, finalHeight, tsffix = ''; var rm = maxWidth / maxHeight, r = imgWidth / imgHeight; if(r < rm){ finalWidth = maxWidth; finalHeight = maxWidth / r; tsffix = 'translateY(-' + (finalHeight - maxHeight) / 2 + 'px)'; } else { finalHeight = maxHeight; finalWidth = maxHeight * r; tsffix = 'translateX(-' + (finalWidth - maxWidth) / 2 + 'px)'; } $img.css({width: finalWidth, height: finalHeight, transform: tsffix}); } </script> </head> <body> <label>正方形居中显示并且圆角:</label> <div class="rd-box2" style="width:200px;height:200px;overflow:hidden;"> <i class="left-top"></i> <i class="right-top"></i> <i class="left-bottom"></i> <i class="right-bottom"></i> <img src="mao.png" onload="centerThisImg(this, 200, 200)"/> </div> </body> </html>
效果图如下:
总结:
其实,如果图片能够继承父元素的圆角效果,那么就不需要这么麻烦,但是现实是图片元素四个角会超出父元素(设了圆角)。
我查阅了资料,有人说这种行为是浏览器默认特性,就是这样效果(https://stackoverflow.com/questions/8582176/should-border-radius-clip-the-content)。
我实际的测试也是这样,不过,就不深究了。
本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。
本文地址 :http://www.cnblogs.com/lovesong/p/10015829.html
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:DOM基础练习代码(二)
- DIV居中的经典方法 2020-06-13
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- CSS背景图片的6个有趣的技巧 2020-05-12
- HTML连载84-添加中部的图片 2020-04-21
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash