Question

我想知道可以在调整大小时增加和减少填充，而不是增加和减少高度。

$( function() {
    $( "#resizable" ).resizable({
        handles: 'n,s'
    });
 });

Fiddle example

更新：

我实际上想知道如果我调整div的大小，我想动态增加resize而不是height的填充 Updated Fiddle

尝试从北部和南部位置调整div的大小

Answer 1

是的，可以包括填充。找到更新的小提琴链接。

div#resizable {
  height: 200px;
  width : 400px;
  background-color : aqua;
  padding: 0.5em;
}

https://jsfiddle.net/h2cjsc5h/4/

Answer 2

添加了一些计算更改的小提琴。

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

https://jsfiddle.net/aavrug/6rh7emog/1/

jQuery UI：增加resizeable（）上的填充

2 个答案: