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

Question

我正在尝试缩放 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 以显示完整图像。

为此，我将 overflow:auto 设置为 div。

但问题是当我滚动 div 时我看不到完整的图像。这可能是由于图像的 position:absolute 属性。我该如何解决这个问题。

我也创建了一个 fiddler 。我在缩放图像前后显示了 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/