纯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>

最终效果:

相关推荐
10年前端老司机2 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星2 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构4 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚5 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin6 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang4537 分钟前
React项目(移动app)
前端
用户61848240219519 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队20 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
Rrvive1 小时前
localhost 和 127.0.0.1 的核心区别
前端
蓝倾1 小时前
如何使用Python通过API接口批量抓取小红书笔记评论?
前端·后端·api