Jquery ui可调整大小的rescale背景图像

Question

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

我找到了一些其他示例，他们在<img>内使用了div标记。但我真的想用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设置为百分比：

  

以百分比形式设置背景图像的宽度和高度   父元素。第一个值设置宽度，第二个值设置   高度。如果只给出一个值，则第二个值设置为“auto”

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

<强> CSS：

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

<强> Fiddle Demo