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>
View Code
效果图如下:
总结:
其实, 如果图片能够继承父元素的圆角效果, 那么就不需要这么麻烦, 但是现实是图片元素四个角会超出父元素(设了圆角).
我查阅了资料, 有人说这种行为是浏览器默认特性, 就是这样效果().
我实际的测试也是这样, 不过, 就不深究了.
来源: https://www.cnblogs.com/lovesong/p/10015829.html