CODEWITHSUNDEEP
javascriptjqueryhtmlcss
LAffair
LAffair

Reputation: 1998

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

Upvotes: 2

Views: 23839

Answers (4)

Raith
Raith

Reputation: 528

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.

Upvotes: 3

kewlashu
kewlashu

Reputation: 1109

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
}

Upvotes: 0

claudiomedina
claudiomedina

Reputation: 126

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

Upvotes: 3

Mamun
Mamun

Reputation: 145

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>

Upvotes: 2

Related Questions