CSS-恒定大小的边框图片

Question

说明： 我试图在调整div大小时获得恒定大小的边框图像。我正在考虑使用伪元素解决此问题，但是有办法使事情变得更容易吗？

HTML：

<div id="resizable" class="ui-widget-content">
  <h3>Resizable</h3>
</div>

CSS：

body {
  background: white;
}
#resizable {
  border: 25px solid !important;
  border-image: url(https://svgur.com/i/9c2.svg) 15 round !important;
  background: white
}

视觉：

JSFIDDLE： https://jsfiddle.net/3twuq14z/

Answer 1

Jus将此属性添加到您的svg文件：vector-effect="non-scaling-stroke"到SVG路径。看一下这里（我重新上传了您的svg文件）：https://jsfiddle.net/dswLmaxo/

Answer 2

是的，您可以这样做：

$("#resizable").resizable({
 aspectRatio: 9/ 9,
 });

body {
  background: white;
}
#resizable {
  border: 25px solid transparent;
  border-image: url(https://svgur.com/i/9c2.svg) 30 round;
  background: white;
  width:100px;
  height:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="resizable" class="ui-widget-content">
  <h3>Resizable</h3>
</div>

https://jsfiddle.net/3twuq14z/2/