javascript - 在 div 内滚动完整图像

Question

我将这张图片附加到一个 div JSFiddle我的 Div 在模态中。我试图默认显示左下角(如填充 div)并允许用户水平和垂直滚动以查看图像的其余部分，但似乎我有一些蓝色区域，我无法滚动到图片的结尾。

    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 以查看其余部分？

我是 HTML 编程的新手，所以请保持温柔 :)

Answer 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

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

.scrollTop(99999)

对大数字进行硬编码有点麻烦，但它节省了获取元素的句柄(这将允许您使用它的真实高度)。

注意:vertical-align: bottom 是显示图像而不显示下方蓝色区域所必需的。这是因为图像自然位于文本的基线上，所以您看到的蓝色区域是悬挂字母的空间。