Scroll Full Image Inside Div

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 to s

Solution 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.

Solution 2:

The solution is quite simple:

1. Don't use display: inline-block; as it will place the image will be placed inline and with some margin down. Instead use display: block

2. The top: -50%; is also moving the picture 50% up leaving it's original position blank

Solution 3:

You make this simple:

.img-wrapper {
    height: 400px;
    width:400px;
    background-color: blue;
    position: relative;
    overflow-x:auto;
    overflow-y:auto;
}

.img-wrapper > img {
    position: relative;
}

<divid="myDiv"class="img-wrapper"><imgsrc="https://nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg"id="theImg"/></div>

Solution 4:

Try this: (Assumption - You will adjust for your image size and containing div size as required)

html

<div id="myDiv"class="img-wrapper">
<imgsrc="http://nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg"></div>

JS:

var d = $('#myDiv');
d.scrollTop(d.prop("scrollHeight"));

CSS:

.img-wrapper {
    height: 400px;
    background-color: blue;
    position: relative;
    overflow-x:auto;
    overflow-y:auto;
}

.img-wrapper > img {
    display: inline-block;
    position: relative;
    border:1px solid red
}