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

只需将此属性添加到您的 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/

CSS - 边框图像的恒定大小

CSS - Constant size of border image

jquery-ui

jquery-ui-resizable