Question

我使用interact.js来调整元素的大小。我想要调整大小的元素却包含其中的子元素。这是jsfiddle。

元素如下所示：

图像中的布局由flex控制。然后我使用interact.js库来调整元素的大小：

如您所见，容器元素调整大小但不调整子元素。

html是：

<div class="flex resize-container">
    <div class="resize-drag">

        <div class="aside-1">
                  menu stuff
        </div>

        <div class="graph-main ">
            <img src="http://i.stack.imgur.com/jGlzr.png" height="150" width="150" />
        </div>

    </div>
</div>

和CSS：

.flex {
    display: flex;
    flex-wrap: wrap;
}

.resize-drag {
    border: 1px gray dotted;
}
.aside-1 {
    flex: 1;
    position: relative;
    display:inline-block;
}

.graph-main {
    flex: 4;
    position: relative;
    display:inline-block;
}

和js：

interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener
  })
  .resizable({
    preserveAspectRatio: true,
    edges: { left: true, right: true, bottom: true, top: true }
  })
  .on('resizemove', function (event) {
    var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);

    // update the element's style
    target.style.width  = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);

  });

当我调整大小时，我希望里面的元素缩小或扩展，并保持其位置。这可能吗？还是有更好的图书馆？

修改

我试过路易斯＆＃39;建议但它不起作用http://jsfiddle.net/jnk2tjea/

Answer 1

您的图片有固定的高度（此处为150像素）。您应该指定相对大小，它将是父级div的一个百分比。添加以下CSS代码并删除固定大小：

.graph-main img {
    width : 100%;
}

请注意，要使用porcentage，父div必须具有固定大小。

这是一个带有修复程序的link to your code。

调整大小时缩小/扩展子元素的大小

1 个答案: