css让图片的某些区域拉伸，其他部分保持比例，起到类似于安卓中点九.9图的效果

css图片拉伸后，让某些区域不变形的解决方案--类似于安卓中的点9图

YSoup

6216人浏览 · 2022-08-21 16:42:47

YSoup · 2022-08-21 16:42:47 发布

前言

做过安卓开发的都知道点九图，我们在一张图片的上边框、左边框用鼠标拖动一下，就能决定某一张图片哪些区域可以被拉伸，如下图：
在这里插入图片描述
上图中红色区域是可以被拉伸的，四个角落的白色区域是不会被拉伸的。比较典型的一个应用场景是聊天界面中的气泡，由于每次打的字内容长度都不一样，所以聊天气泡需要被拉伸以便能刚好容纳大家发送的内容。但是，如果随意拉伸，很可能就会出现下图的效果（图片摘自郭霖的《第一行代码》）：
在这里插入图片描述
如果有了点9图，那么就能实现下图的效果：

怎么样，是不是好看、清晰了许多？

css中的解决办法

css中也有类似的解决方案，防止图片被随意拉伸，能保证四个角落不被拉伸，下面我直接举一个例子就好了。网上别人对border-image做了很详细的解释，但是可能就是因为太详细了，让人抓不到重点。

示例代码

<!DOCTYPE html>
<head>
    <style>
        #round {
            border-image-source: url('./images/nn.png');
            border-image-slice: 10 280 210 10 fill;
            border-top: 10px solid;
            border-right: 280px solid;
            border-bottom: 210px solid;
            border-left: 10px solid;
            height: 358px;
            width: 806px;
        }
    </style>
</head>
<body>
    <div id="round">
        测试
    </div>
</body>
</html>

我本人准备了一张尺寸为806x358的图片，名为nn.png。上图我指定宽为806px，高为358px，这应该没啥问题，因为图片没有被拉伸，显示效果如下图所示：
在这里插入图片描述
那假如我修改css中的height为600px，右下角的奶牛猫会不会变形呢?这是不会的，如下图：

同理，我修改高度为200，奶牛猫也不会变形，如下图：

css的解释

border-image-source

这个就算我不说，相信你也知道，就是用来指定图片的

border-image-slice

这个是用来切割图片的，砍了四刀（顺序为上砍->右砍->下砍->左砍），一张图片就会变成9张图，如下图所示：
在这里插入图片描述
那为什么我指定的是这4个值：10 280 210 10呢？
重点是右砍280px和下砍210px，其实只要能把奶牛猫从右下角给砍出去就可以了，这样拉伸后奶牛猫就不会变形。注意最后还要指定四个边的border属性，不然就相当于裁剪了，连奶牛猫都看不到！