svg、png图片拉伸

方式一 svg 拉伸  preserveAspectRatio="none"

在svg标签 添加preserveAspectRatio="none"

缺点：如果有icon，icon也会被拉伸，这个是整体拉伸

<svg width="1264px"
     height="722px"
     viewBox="0 0 1264 722"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     preserveAspectRatio="none">
     ```

方式二：css border-image 图片拉伸，九宫格，4个角不变，可以局部拉伸  （推荐）

使用场景：当我们使用一种背景图，长度和宽度不固定，直接拉伸100%时，会有一些元素被拉伸变形，可以使用css border-image 方法试试

border-image 属性可以通过一些简单的规则，将一副图像划分为 9 个单独的部分，浏览器会自动使用相应的部分进行拉伸。

九宫格，

1 3 7 9 不会被拉伸，

2 4 5 6 8 会被上下左右拉伸

工具地址：Border-image generator - CSS: Cascading Style Sheets | MDN

border-image-source：定义边框图像的路径；

border-image-slice：定义边框图像从什么位置开始分割；

border-image-width：定义边框图像的厚度（宽度）；

border-image-outset：定义边框图像的外延尺寸（边框图像区域超出边框的量）；

border-image-repeat：定义边框图像的平铺方式 stretch（水平和垂直方向都是拉伸） | repeat（水平和垂直都是重复） | round（水平和垂直都是平铺）

border-image是border-image-source || border-image-slice|| border-image-width|| border-image-outset || border-image-repeat 属性的简写

简写
border: 1px solid transparent;

border-image: url(./a.png) 27 174 27 177 fill / 27px 174px 27px 177px / 0 stretch;

全写
border-image-source: url("./a.png");

border-image-slice: 27 174 27 177 fill; // fill 填充中间元素，使中间区域不会留白

border-image-slice: 27 174 27 177; // 中间区域会留白

border-image-width: 27px 174px 27px 177px;

border-image-outset: 0;

border-image-repeat: stretch;

效果如下：

这些地方明显被拉伸了

官方示例：border-image - CSS：层叠样式表 | MDN