绝对定位图像变焦无法正常工作 [英] absolute positioned image zoom not working properly

问题描述

我想放大一个div里面的图片。

加载网页时，在 400 * 400尺寸div 中显示 300 * 300尺寸图片 / p>

因此，为了在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 属性。我如何解决这个问题。

我也创建了一个提琴手。我在显示缩放图像之前和之后的2个div。请检查。

http：// jsfiddle。

$ p

解决方案

HTML

< div class =inner>
< img id =img1src =http://siliconangle.com/files/2012/04/HTML5_Wallpaper_1680x1050.png/>
< / div>
< / div>
< button class =zoomoutdata-zoom =out>缩小< / button>
< button class =zoomindata-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/

I am trying to zoom a image which is inside a div.

When page is loaded i am showing 300*300 size image inside a 400*400 size div.

So, to show the image at the center of the div i am using the following css.

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

with the above css code i can able to show the image at the center of the div.

but when a user clicks on zoom button i am increasing the height and width of the image. If it becomes 600*600 size image, i have to show scroll bar so the user can scroll the div to show the full image.

For this i set overflow:auto to div.

But the problem is i can't see the full image when i scroll the div. This may be due to the position:absolute property of image. How can i fix this.

I created a fiddler also. There i am showing 2 divs before and after zooming image. Please check.

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

解决方案

Can you try this;

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/

这篇关于绝对定位图像变焦无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！