My goal is to zoom in on an image that is contained within a div element.
Upon page load, I display a 300x300 pixel image inside a 400x400 pixel div.
To center the image within 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 this CSS code, the image displays at the center of the div successfully.
However, when a user clicks the zoom button, I increase the dimensions of the image. If it becomes 600x600 pixels, I need to enable a scroll bar so the user can navigate the enlarged image within the div.
To implement this scrolling functionality, I set overflow:auto for the div.
The issue arises when trying to view the entire expanded image by scrolling through the div. This problem could be related to the position:absolute property applied to the image. How can I address this?
I have also created a fiddle displaying two divs with the image before and after zooming. You can view it here: