纯CSS如何实现只拉伸图片中间区域，类似点9图效果

背景

在开发中，经常需要实现容器在拉伸的过程中，容器的背景图片能够自适应同时不变形。比如下面聊天框的效果，不管内容多长，聊天框的背景撑满容器，同时箭头及边框不拉伸。

上面的需求，实际上可以将背景图分成三部分，左中右。在拉伸的过程中，固定左边和右边不变，只拉伸中间区域。

又比如下面的一张图（尺寸：762px * 102px），希望实现，在拉伸的过程中保持左边的1和2，右边的6和7不变，只拉伸中间的3，4，5。

效果如下：

实现

实现这种效果的方式有很多种，比如可以通过将图片分割成左中右三张图，如下面所示

html 复制代码

  <div>
    <img src="left.png" alt="">
    <img src="middle.png" alt="">
    <img src="right.png" alt="">
  </div>

使用flex布局，固定left.png和right.png的尺寸，让middle.png自适应撑满容器即可。

但这种方式比较麻烦，为了实现背景拉伸的效果使用了至少4个DOM元素，性能不好，同时也不好将图片当作背景图使用。

今天介绍一种类似点9图的方法。‌点9图（.9.png）是Android开发中特有的一种图片格式，用于解决图片在不同分辨率下的拉伸变形问题，可以自行搜索点9图了解。

web中没有点9图相关的API。但CSS提供了border-image-slice的能力，可以实现点9图的效果，具体可以看MDN：border-image-slice

下面代码是使用border-image-slice实现只拉伸图片中间部分的效果，原图尺寸762px * 102px。由于需要保持左边的1和2，右边的6和7不变，因此border image slice的左边和右边尺寸固定208px。

html 复制代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
  * {
    box-sizing: border-box;
}
  .container {
    background-color: red;
    color: white;
    height: 102px; // 图片高度
    width: 100%;
    border-image-source: url(./1.jpg);
    border-image-width: 102px 208px 0px 208px;// 102px是原始图片的高度，208px是两个数字的宽度
    border-image-slice: 102 208 0 208;
    // 或者合并上下面这样也行，这样压缩的时候不会等比缩放
    //border-image: url(./1.jpg) 0 208 0 208 fill / 1px 208px stretch

  }
  .block {
    width: 100px;
    height: 100px;
    background-color: red;
  }


</style>
</head>
<body>

  <div id="container" class="container">
    <div>
      hello world  762 × 102

    </div>
  </div>
  <div>
    下面是原图：
  </div>
  <img src="./1.jpg" alt="">

  <div class="block">参照物尺寸：100 * 100</div>
  <script>

  </script>
</body>
</html>

最终效果：