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

番茄西红柿发布于2019-04-23 13:09 / 1871人阅读

摘要：图片圆角显示例如非常简单如果图片只为圆角，这种方式确实没问题，但如果还要加上居中的效果，这种方式就有问题，下面会说明。例如图片自适应填充，并居中显示。

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://stackoverflow.com/questions/8582176/should-border-radius-clip-the-content）。

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

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

本文地址：http://www.cnblogs.com/lovesong/p/10015829.html

GPU云服务器云服务器图片圆角生成圆角图片截图保存并显示 php图片圆角代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1509.html

前端（四）之精灵图与盒模型布局

摘要：前端之常用标签的使用边界圆角精灵图以及盒模型的布局前端之常用标签的使用边界圆角精灵图以及盒模型的布局前言前言上篇博客介绍了组合选择器，包括四种，分别是群组选择器后代子代选择器兄弟相邻选择器及交集选择器标签的四大伪类选择器，，其中和也可以用于前端之常用标签的使用、边界圆角、精灵图以及盒模型的布局前言上篇博客介绍了组合选择器，包括四种，分别是群组选择器、后代（子代）选择器、兄弟（相邻选择器）...

xiangchaobin 2019-04-23 13:07 评论0 收藏0
构建静态页面之 [ 盒子模型 ]

摘要：盒子模型描述每一个元素都可以叫做是盒子模型盒子模型的组成内容区元素中内容文本图片等等内边距内容区到边框的距离边距内容区的边界外边距盒子与盒子之间的距离属性表示设置元素的边框属性是简写属性可以分为表示边框的宽度表示边框的样式盒子模型描述每一个元素都可以叫做是盒子模型盒子模型的组成内容区 - 元素中内容（文本、图片、等等）内边距 - 内容区到边框的距离边距 - 内容区的...

teren 2019-08-29 16:32 评论0 收藏0
构建静态页面之 [ 盒子模型 ]

摘要：盒子模型描述每一个元素都可以叫做是盒子模型盒子模型的组成内容区元素中内容文本图片等等内边距内容区到边框的距离边距内容区的边界外边距盒子与盒子之间的距离属性表示设置元素的边框属性是简写属性可以分为表示边框的宽度表示边框的样式盒子模型描述每一个元素都可以叫做是盒子模型盒子模型的组成内容区 - 元素中内容（文本、图片、等等）内边距 - 内容区到边框的距离边距 - 内容区的...

coordinate35 2019-08-02 11:21 评论0 收藏0
哪些你知道或不知道的css，在这里或许都齐全

摘要：简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。首先，我们要明白这里的最小宽度值是什么意思。暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。...

Jackwoo 2019-08-30 13:50 评论0 收藏0
哪些你知道或不知道的css，在这里或许都齐全

摘要：简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。首先，我们要明白这里的最小宽度值是什么意思。暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。...

Bryan 2019-08-21 17:13 评论0 收藏0