Scroll full image inside div

Question

I have this image appended to a div JSFiddle and my Div is inside a modal. I\'v tried to display by default the bottom left quarter (like filling the div) and to allow the user

Answer 1

https://jsfiddle.net/2mLbhmuL/61/

CSS:

.img-wrapper {
    overflow: auto; /* adds scrollbars */
    height: 400px;
    background-color: blue;
    position: relative;
}

.img-wrapper > img {
    height: 200%; /* probably looks neater if auto */
    width: 200%; /* double width image to show only first quarter */
    vertical-align: bottom; /* moves image to true text bottom */
}

JQuery

Add the following ScrollTop(9999) to the end of your existing JQ to jump the div to the bottom.

.scrollTop(99999)

It's a bit nasty hard-coding a large number but it saves getting a handle to the element (which would allow you to use its real height).

Note: The vertical-align: bottom is needed for the image to display without showing your blue area underneath. The reason for that is an image is naturally positioned on the baseline of text, so the blue area you were seeing is the space for hanging letters.