Jquery ui redimensionnable redimensionner image de fond

Question

J'ai un div avec une image de fond, je permets à l'utilisateur de redimensionner la div en utilisant la fonction Jquery UI's resizable. J'espérais que l'image de fond serait mise à l'échelle lorsque l'utilisateur redimensionne le div. Mais cela n'arrive pas. Y at-il un moyen facile de résoudre ce problème?

J'ai trouvé d'autres exemples où ils ont utilisé un <img> tag à l'intérieur du div pour cela. Mais je voulais vraiment utiliser CSS pour l'image de fond.

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

Réglage du background-size à un pourcentage:

Définit la largeur et la hauteur de l'image d'arrière-plan en pourcentage de l'élément parent . La première valeur définit la largeur, la deuxième valeur définit la hauteur. Si une seule valeur est donnée, le second est réglé sur « auto »

Voir this pour plus d'informations sur la propriété background-size.

CSS:

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

Fiddle Demo