关于css样式让图片的某些区域拉伸，其他部分保持比例！原理讲解！

键盘飞行员

已于 2024-06-06 11:34:50 修改

阅读量4.1k

点赞数 10

文章标签： css 前端

于 2024-06-06 11:24:57 首次发布

本文链接：https://blog.csdn.net/weixin_68397463/article/details/139495071

版权

一，关于CSS样式中控制图片在不同方位的拉伸效果，首先我们要用导入控制的背景图片，要用属性：border-image-source 来加载背景图片！

border-image-source: url("../assets/images/biankuang.png");

border-image-source属性用于指定边框的图像源。在提供的代码中，border-image-source属性使用url("../assets/images/biankuang.png")来设置边框图像的源文件。这意味着边框将使用指定的图像作为其样式。

二，通过属性`border-image-slice`属性用于指定如何切分边框图像，并定义每个切片的大小。

border-image-source: url("../assets/images/biankuang.png");
border-image-slice: 80 30 70 30 fill;

具体来说，border-image-slice属性接受一组数值作为参数，用于指定切片的大小。代码中，border-image-slice属性的值为80 30 70 30 fill。

第一个值（80）表示上边框切片的大小。
第二个值（30）表示右边框切片的大小。
第三个值（70）表示下边框切片的大小。
第四个值（30）表示左边框切片的大小。
最后的fill关键字表示切片将填充边框的中间部分。

`三，border-image-repeat`属性用于指定边框图像的重复方式。

border-image-source: url("../assets/images/biankuang.png");
border-image-slice: 80 30 70 30 fill;
border-image-repeat: stretch;

当border-image-repeat设置为stretch时，边框图像将被拉伸以匹配边框的宽度和高度。这意味着图像不会重复平铺，而是被拉伸以适应边框的尺寸。

其他可能的border-image-repeat属性值包括：

repeat：边框图像将平铺以填充整个边框区域，可能会重复出现图像的部分。
round：边框图像将平铺以填充整个边框区域，如果图像的重复次数无法完全匹配，会自动调整图像的大小，保持尽可能的平铺效果。
space：边框图像将平铺以填充整个边框区域，如果图像的重复次数无法完全匹配，会在图像之间均匀地分配空白间隔。

四，`border-width`和`border-style`属性用于设置边框的宽度和样式。

border-width: 80px 25px 70px 25px;
border-style: solid;
border-image-source: url("../assets/images/biankuang.png");
border-image-slice: 80 30 70 30 fill;
border-image-repeat: stretch;

五，最后设置高度height，这样图片就不会被拉伸变形！

// 现场数据
    .fieldData {
      height: 550px;
      margin-top: 15px;
      border-width: 80px 25px 70px 25px;
      border-style: solid;
      border-image-source: url("../assets/images/biankuang.png");
      border-image-slice: 80 30 70 30 fill;
      border-image-repeat: stretch;
      position: relative;
      // 现场数据
      .fieldDataTitle {
        position: absolute;
        top: -68px;
        left: -20px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        padding: 14px 0 10px 40px;
        text-align: left;
      }
 }

HTML代码如下

<!-- 现场数据 -->
      <div class="fieldData">
        <div class="fieldDataTitle">现场数据</div>
        <div class="dataContent ml0">
        </div>
      </div>

样式展示图如下：