内部の画像に基づいてコンテナDIVの動的リサイズを行う

Question

リサイズ可能な関数を使用していくつかの画像を操作していますが、コンテナDIV（具体的には.CONTAINER）を使用して画像を囲むことができますか？その内部の画像とともに動的にサイズを変更します。私が行っていることの例については、JSFIDDLEを参照してください。

HTML

<div class="container"> 
    <div class="resizable" class="ui-state-active"> 
     <img src="http://41.media.tumblr.com/3e99c08237117645f55cd1c4bdbf3180/tumblr_mky50dQmXI1s56exfo1_500.png" alt="doge"> 
    </div> 
</div> 

$(function() { 
    $(".resizable").resizable({ 
     containment: ".container", 
     aspectRatio: 150/200 
    }); 
}); 

もともとCSS

.container { width: auto; height: auto; } 

.resizable { background-position: top left; width: 150px; height: 200px; } 
    .resizable, .container { padding: 0.5em; } 
     .resizable img {width:100%;} 

JSは、私は多分置くことを考えましたコンテナの幅/高さがAUTOに設定されている場合は、DIVの長さの100％にすぎません。

思考？

Answer 1

これを変更すると動作します。コンテナの幅と高さをautoに設定し、親幅全体を取らないようにインラインブロックを表示する。

CSS

.container { width: auto; height: auto; display: inline-block; } 

.resizable { background-position: top left; width: 150px; height: 200px; } 
    .resizable, .container { padding: 0.5em; } 
     .resizable img {width:100%;} 

はまた、あなたはあなたのjsの封じ込めラインを削除する必要があります。

JS

$(function() { 
    $(".resizable").resizable({ 
     aspectRatio: 150/200 
    }); 
});