jQuery UI：私のサイズ変更機能が正しく動作していない

Question

私のサイズ変更機能が正しく動作していないことを知りたいのは、私が問題を起こしていることを意味します。それをサイズ変更するには、パディングが縮小します。

注：高さではなく詰め物を増やしています。

$(function() { 
    $("#resizable").resizable({ 
     resize: function(event, ui) { 
     var originalHeight = ui.originalSize.height; 
     var newHeight = ui.size.height; 
     var pad = 5; 
     if (originalHeight < newHeight) { 
      pad = newHeight - originalHeight; 
     } 
     $(this).css({'padding': pad, 'height': 200, 'width': 400}); 
     } 
    }); 
}); 

My fiddle link

Answer 1

うん@Botimooが正しいようです。あなたはおそらく、パディング以外の何かを使ってポジショニングを考えるべきでしょう。 https://jsfiddle.net/6rh7emogを：しかし、このようなものは、おそらくあなたは、パディング

https://jsfiddle.net/6rh7emog/5/

<div id="resizable" class="ui-widget-content"> 
    <div id="wrapper"> 
    <h3 class="ui-widget-header">Resizable</h3> 
    </div> 

$(function() { 
    $("#resizable").resizable({ 
     aspectRatio: true, 
     resize: function(event, ui) { 
     var originalHeight = ui.originalSize.height; 
     var newHeight = ui.size.height; 
     $('#wrapper').css({ 
       'padding': newHeight - 200 
     }); 
     } 
    }); 
});