图片圆角并居中显示解决方案-白红宇

图片圆角并居中显示解决方案

阅读量：5098 次

发布时间：2019-06-13

本文共 1673 字，大约阅读时间需要 5 分钟。

1、图片圆角显示

例如（非常简单）：

HTML：

CSS：

img{
       border-radius: 10px;}

如果图片只为圆角，这种方式确实没问题，但如果还要加上居中的效果，这种方式就有问题，下面会说明。

2、图片居中显示（铺满父容器且不变形）

效果图如下：

PS：为了实现上图居中的效果，单靠CSS是不行的，还需要JS处理。

例如：

HTML：

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、遮挡法模拟出圆角

我们可以用四个内凹三角形，遮挡在图片四角上（居中后的），让人误以为是图片圆角了。

例如（结合居中的完整代码）：

    
          正方形居中显示并且圆角                正方形居中显示并且圆角：

View Code

效果图如下：

总结：

其实，如果图片能够继承父元素的圆角效果，那么就不需要这么麻烦，但是现实是图片元素四个角会超出父元素（设了圆角）。

我查阅了资料，有人说这种行为是浏览器默认特性，就是这样效果（）。

我实际的测试也是这样，不过，就不深究了。

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址：

转载于:https://www.cnblogs.com/lovesong/p/10015829.html

你可能感兴趣的文章