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以显示完整图像。

为此，我将溢出：自动设置为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/

绝对定位图像缩放不正常

1 个答案: