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
}

VISUAL:

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

Answer 1

Да, вы можете сделать:

$("#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/

Answer 2

Jus добавьте это свойство в ваш SVG-файл: vector-effect="non-scaling-stroke" в SVG-путь.Посмотрите здесь (я заново загрузил ваш SVG-файл): https://jsfiddle.net/dswLmaxo/