不规则border-image如何自适应？

Question

想请教一下像这种不规则的背景图，如何实现按照图片的大小自适应呢？
重要的是背景图不被拉伸，可以基本正常显示。

Answer 1

随便截图试了一下，大概效果是这样

div {
    width: 200px;
    padding: 38px;
    margin-bottom: 12px;
    border-image: url('/img/bVdaZGI') 38 / 38px round;
}
img {
    display: block;
    width: 100%;
}

Answer 2

从设计图看, 可以左右均分, 因此图片只用设置固定的宽就可以了, 高会根据宽自适应的

Answer 3

配合 border-image-slice（也是 border-image 这种省略写法的第二个参数），相当于把四个角切出来。

这种场景有个术语叫点九图，你随便搜一下 “CSS border-image 点九图” 之类的关键词就有了。

Answer 4

https://masonry.desandro.com/index.html。 https://isotope.metafizzy.co/index.html