javascript - jQuery 用户界面 : My resize function is not working properly

Question

我想知道我的调整大小功能无法正常工作，因为我表示问题是当我调整 div 大小时(增加填充)并保留它，当我再次尝试调整它大小时填充缩小。

注意:我增加的是内边距而不是高度。

$( 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/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 
        });
      }
    });
 });