CODEWITHSUNDEEP
javascriptcssimagezooming
michal_h
michal_h

Reputation: 51

Zoom on image inside div after resizing the image

Im trying to put an image with high resolution into div. to do that, i used the property max-width / max-height on the image and it fit perfectly.

right now i want to add button - when clicking on button, I would like to zoom in the image without getting out of div's borders - in other words, I would like that the picture dimension will grow up inside the div with scrolles.

the problem is that the zoom property doesnt work so good - I guess its because the max-width I used on the image in order to resize it.

How can I get those 2 demands together?

Here is the code:

    <div id="maps-content" class="maps-content">
            <div id="map-frame">
                <img src="images/empty_diagram.png" />
            </div>
            <div id="img-buttons">
                <asp:Button ID="zoom_in_btn" runat="server" Text="Zoom In" OnClientClick="ZoomIn();return false;" />
                <asp:Button ID="zoom_out_btn" runat="server" Text="Zoom Out" OnClientClick="ZoomOut();return false;" />
            </div>
        </div>



div#maps-content {
    height: 90%;
    background-color: blue;
}
div#map-frame {
    /*position: relative;
    height: 90%;*/
    background-color:darkgoldenrod;
}
div#img-buttons {
    /*position: relative;
    height: 10%;*/
    background-color:red;
}
div#map-frame img {
    max-width: 100%;
    max-height:100%;
}

Thank you

Upvotes: 1

Views: 922

Answers (1)

Burhan Kashour
Burhan Kashour

Reputation: 677

For example, If you use a div within id="div1" and the image is inside it, and you dont want to get out the border of the div,

simply use the overflow code, for ex.

#div1{
overflow:hidden;
}

This will hide all the content outside the div1.

Please provide a code, or screen snap so we can help.

Upvotes: 1

Related Questions