Question

72

Scroll full image inside div

rated 0 times [ 75] [ 3] / answers: 1 / hits: 18887 / 6 Years ago, thu, february 22, 2018, 12:00:00

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 :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rickjordond

Add To Favorites

Follow

Total Points: 100

Total Questions: 105

Total Answers: 90

Location: Sweden

Member since Mon, May 8, 2023

1 Year ago

answered 6 Years ago bradleymoisesy · Accepted Answer

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.