jquery ui resizable rescale background-image

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爲百分比：

設置背景圖像的寬度和高度，以父元素的 的百分比表示。第一個值設置寬度，第二個值設置高度。如果只給出一個值，第二個被設置爲「自動」

有關background-size屬性的詳細信息，請參閱this。

CSS：

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

Fiddle Demo