在 div 内滚动完整图像答案

【问题标题】：Scroll full image inside div在 div 内滚动完整图像
【发布时间】：2018-02-22 17:26:33
【问题描述】：

我将此图像附加到 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 编程新手，所以请温柔:)

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你让这个简单：

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

【讨论】：

【解决方案2】：

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

【讨论】：

注意：上面的 CSS 会在两个方向上调整图像的大小，即 div 宽度和高度的 200%。但这可能会扭曲您的形象。快速解决方法是将width 或height 设置为auto（根据我的评论），但是您会冒自动尺寸无法填充空间的风险！如果您真的想强制图像在两个维度上都大于 div 并保持纵横比，那么您将不得不添加更多 JQuery - 以调整 img 元素的大小。
您仍然可以在图像下方看到一条小蓝线
另外 .scrollTop(99999) 在您关闭模式并重新打开它时不适用，即使再次调用这行代码也是如此。如果您对滚动进行了一些更改，则在第二次重新打开时会应用该位置。
嘿 Dana，你还看到底部的蓝色条吗？ vertical-align: bottom; 应该已经解决了这个问题。它对我有用。像素高是多少？另外，我可以看到您关于scrollTop 的观点。您是隐藏和显示您的模态还是每次都重新创建它？ jsfiddle 我们可以处理吗？
我解决了这个问题 :) 非常感谢或您的回答。我已经将它标记为解决我的问题的那个 :) 快乐编码！ :)

【解决方案3】：

解决方法很简单：

不要使用display: inline-block;，因为它会将图像置于内联并向下放置一些边距。而是使用display: block
top: -50%; 还将图片向上移动 50%，使其原始位置为空白

【讨论】：

【解决方案4】：

试试这个：（假设 - 您将根据需要调整图像大小并包含 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
}

【讨论】：