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

Question

使用interact.js调整元素的大小。然而，我想调整大小的元素在其中有孩子。这里是jsfiddle。

一个元素看起来像这样：

图像内的布局由柔性控制。然后我用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); 

    }); 

我想里面的元素，以缩小或扩大，并保持自己的立场，当我调整。这可能吗？还是有更好的图书馆？

编辑

我想路易的建议，但它不工作http://jsfiddle.net/jnk2tjea/

Answer 1

你的形象有固定的和高度（150像素这里）。 你应该指定一个相对大小，它将是父级div的一个porcentage。添加以下的CSS代码，并删除固定大小：

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

注意与porcentage工作，父DIV必须有一个固定的大小。

以下是修复的link to your code。