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 to scroll horizontally and vertically to see the rest of the image but it seems that I have some blue areas and I cannot scroll till the end of the image.

    imgUrl = "nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg"

    $('.img-wrapper').append($('<img id="theImg">').attr({
                    'src': 'https://' + imgUrl ,
                    'alt': 'test image'
                })
                )

.img-wrapper {
    overflow: hidden;
    height: 400px;
    background-color: blue;
    position: relative;
    overflow-x:auto;
    overflow-y:auto;
    }
    
    .img-wrapper > img {
        display: inline-block;
        height: 150%;
        width: 150%;
        position: relative;
        top: -50%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div id="myDiv" class="img-wrapper">
    </div>

Is there a way to display, when the modal is open, just the bottom left quarter of the image and allow the user to scroll XY to see the rest of it?

I'm new in HTML programming so please be gentle :)

score 3 · Answer 1 · answered Feb 22 '18 at 17:43

The solution is quite simple:

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
The top: -50%; is also moving the picture 50% up leaving it's original position blank

score 3 · Accepted Answer · answered Feb 22 '18 at 18:15

3

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.

answered Feb 22 '18 at 18:15

Raith

528
3
8

Note: The above CSS will size the image in both directions, to 200% of the div width and height. But that is likely to distort your image. The quick fix is to set either `width` or `height` to `auto` (as per my comment), but then you run the risk of the auto dimension not filling the space! If you really want to force the image to be larger than the div in both dimensions AND to maintain aspect ratio then you are going to have to add more JQuery - to size the img element. – Raith Feb 22 '18 at 18:21
You can still see a small blue line bellow the image – LAffair Feb 22 '18 at 18:44
Also .scrollTop(99999) doesn't apply when you close the modal and reopen it, even if this line of code is called again. If you make some changes on scroll, on the second reopening applies that positions. – LAffair Feb 22 '18 at 18:46
Hey Dana, you still see the blue bar at the bottom? The `vertical-align: bottom;` *should* have solved that. It did for me. How many pixels high is it? Also, I can see your point about the scrollTop. Are you hiding and showing your modal or creating it anew each time? jsfiddle that we can work on? – Raith Feb 23 '18 at 17:29
I solved the problem :) Thanks a lot or your answer. I already marked it as the one that solved my problem :) Happy coding! :) – LAffair Feb 23 '18 at 17:32

score 2 · Answer 3 · answered Feb 22 '18 at 17:35

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;
}

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

score 0 · Answer 4 · answered Feb 22 '18 at 17:46

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

html

<div id="myDiv" class="img-wrapper">
<img src="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
}

Scroll full image inside div

4 Answers4

Linked