Bild wird unten angezeigt

Question

Ich habe ein Modal, das erscheint und ich benutze die Ui-resizable. Das Problem ist, wenn das Modal groß ist (es hat eine eingestellte Höhe und kann daher scrollen), das Bild wird mit der Bildlaufleiste übertragen. Ich kann es nicht reparieren lassen, denn wenn man es greift und horizontal oder vertikal bewegt, bewegt sich das Modal. Nicht sicher, was zu tun ist. Derzeit befindet es sich in der rechten unteren Ecke des Modals. Kann jQuery auch benutzen, wenn es sein muss.

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%; 
} 

Dies wird immer das Bild quadratisch gesetzt mit seiner Höhe machen, indem es Breite ist.