在div中滚动全图 [英] Scroll full image inside div

问题描述

我将此图片附加到div JSFiddle 而我的Div是在情态里面我尝试默认显示左下角的四分之一(例如填充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>

当模式打开时，是否有一种方法可以显示图像的左下角，并允许用户滚动XY以查看其余部分?

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?

我是HTML编程的新手，请保持柔和:)

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

推荐答案

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

在现有JQ的末尾添加以下ScrollTop(9999)，以将div跳到底部.

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

注意: vertical-align: bottom是显示图像时所需的，而无需在其下显示蓝色区域.原因是图像自然位于文本的基线上，所以您看到的蓝色区域是用于悬挂字母的空间.

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.

这篇关于在div中滚动全图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！