Jquery ui 可调整大小重新缩放背景图像

Question

我有一个带有背景图片的 div，我允许用户使用 Jquery UI's resizable 函数重新缩放 div。我希望当用户调整 div 大小时背景图像会缩放。但这不会发生。有没有简单的方法来解决这个问题？

我发现了其他一些例子，他们在 div 中使用了 <img> 标签。但我真的很想使用 CSS 作为背景图像。

HTML:

<div id="container">
    <div id="settingsWidget" class="SarahComponent">

    </div>           
</div>

CSS:

.SarahComponent {
    width:68px;
    height:68px;
}

#settingsWidget {
    background: URL('../../img/advancedsettings.png') no-repeat;
    padding:40px;
}

JS:

$("#settingsWidget").resizable({
    start: function (event, ui) {
        $(this).css("border", "1px solid red");
    },
    stop: function (event, ui) {
        $(this).css("border", "");
}

});
$("#settingsWidget").draggable({ cursor: "move" });

Answer 1

将 background-size 设置为百分比：

Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"

有关 background-size 属性的更多信息，请参阅 this。

CSS:

#settingsWidget {
  background: URL('https://placehold.it/68x68') no-repeat;
  background-size:100% 100%;
  padding:40px;
}

Fiddle Demo

Jquery ui 可调整大小重新缩放背景图像

Jquery ui resizable rescale background-image

jquery-ui

resizable

jquery-ui-resizable