Абсолютное позиционирование изображения не работает должным образом

Question

Я пытаюсь увеличить изображение, которое находится внутри div.

При загрузке страницы я показываю 300 * 300 размер внутри размер DIV400 * 400.

Итак, чтобы показать изображение в центре div, я использую следующий css.

#img1{ 
    width:300px; 
    height:300px; 
    position:absolute; 
    margin:auto; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
} 

с вышеуказанным кодом css я могу показать изображение в центре div.

но когда пользователь нажимает кнопку увеличения, я увеличиваю высоту и ширину изображения. Если будет 600 * 600 размер изображения, я должен показать полосу прокрутки, чтобы пользователь мог прокрутить div, чтобы показать полное изображение.

Для этого я установил переполнение: авто для div.

Но проблема в том, что я не вижу полного изображения, когда я прокручиваю div. Это может быть связано с положением : абсолютное свойство изображения. Как я могу это исправить.

Я также создал скрипач. Там я показываю 2 div до и после увеличения изображения. Пожалуйста, проверьте.

http://jsfiddle.net/codingsolver/L4qdL/1/

Answer 1

Вы можете попробовать это;

HTML

<div class="outer"> 
    <div class="inner"> 
     <img id="img1" src="http://siliconangle.com/files/2012/04/HTML5_Wallpaper_1680x1050.png" /> 
    </div> 
</div> 
<button class="zoomout" data-zoom="out">Zoom Out</button > 
<button class="zoomin" data-zoom="in">Zoom In</button > 

CSS

.outer{ 
    height:400px; 
    width:400px; 
    overflow:auto; 
    border:1px solid black; 
    float:left; 
    margin:30px; 
    text-align:center; 
} 

.inner { 
    height:400px; 
    width:400px; 
    display:table-cell; 
    vertical-align:middle; 
} 

img { 
    width:300px; 
    height:300px; 
} 

http://jsfiddle.net/L4qdL/7/