サイズ変更時の子要素の縮小/拡大

Question

Im要素のサイズ変更には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); 

    }); 

私が縮小または展開し、その位置を保持するために内部の要素をしたいと思います私はサイズを変更します。これは可能ですか？または、より良い図書館がありますか？

EDIT

私はルイの提案を試みたが、それはあなたのイメージを用いて固定し、高さ（ここでは150ピクセル）しているhttp://jsfiddle.net/jnk2tjea/

Answer 1

を働いていません。 相対サイズを指定する必要があります。相対サイズは親のdivのポーションになります。以下のCSSコードを追加して、固定サイズの削除：porcentageで動作するように

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

注意を、親divが固定サイズを持っている必要があります。

修正内容はlink to your codeです。