Html 绝对定位图像缩放无法正常工作

我正在尝试缩放div中的图像

加载页面时，我在400*400大小的div中显示300*300大小的图像

因此，为了在div的中心显示图像，我使用了以下css

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

使用上面的css代码，我可以在div的中心显示图像

但是当用户点击缩放按钮时，我增加了图像的高度和宽度。如果它变成600*600大小的图像，我必须显示滚动条，以便用户可以滚动div以显示完整图像

为此，我将溢出：auto设置为div

但问题是，当我滚动div时，我看不到完整的图像。这可能是由于image的position:absolute属性造成的。我怎样才能解决这个问题

我还创作了一个小提琴手。在这里，我显示了缩放图像前后的2个div。请查收

你能试试这个吗

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 >

---

因为您已将

外部类设置为固定大小（400px）？是的。但我为该类设置了自动溢出，对吗？@Ranadheer当图像大小增加时，容器div大小也会增加，你想要吗？@midstack。不，我必须显示固定分区。分区大小是固定的。图像大小根据缩放/移动而变化
.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;
}