画像を下にスティックする

Question

私はポップアップするモーダルを持っていて、私はサイズを変更することができます。問題は、モーダルが高ければ（設定された高さにスクロールすることができる）、イメージがスクロールと共に移動する場合です。あなたがそれをつかんで、水平または垂直に動かすとモーダルが動くので、私はそれを修正することはできません。何をすべきかわからない。現在はモーダルの右下にあります。必要に応じてjQueryも使用できます。

https://jsfiddle.net/x7dw1wjg/

HTML

<div class="ui-dialog"> 
    <div class="container">//contains everything in the modal</div> 
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"> 
</div> 

CSS

.ui-dialog{ 
    width: 900px; 
    height; auto; 
    overflow: auto; 
    } 
.ui-resizable-handle { 
width: 22px; 
height: 22px; 
right: 0px; 
bottom: 0px; 
background-position: -77px -220px; // this is just the icon 
position: absolute; 
} 

.container { 
position: relative; 
padding: 1em; 
overflow: auto; 
width: auto; 
max-width: 900px; 
height: 600px; 
} 

Answer 1

.container img { 
height:0; 
width:50% 
padding-bottom: 50%; 
} 

これは、常にそれの幅で設定され、その高さで画像を正方形になります。