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

解决方案非常简单：

请勿使用display: inline-block;，因为它会将图片放置在内嵌并且有一些边距缩小。而是使用display: block
top: -50%;也将图片移动了50％，使其原始位置空白

Answer 2

你这么简单：

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

Answer 3

试试这个：（假设 - 您将根据需要调整图像大小并包含div大小）

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
}

Answer 4

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，而不显示下方的蓝色区域。原因是图像自然地位于文本的基线上，因此您看到的蓝色区域是悬挂字母的空间。

在div

4 个答案: