html - 滚动包含图像的 DIV,而不是文档

标签 html css

我在一个 div 中有一个大图像,我想滚动它。但是我没有滚动 div,而是滚动文档。

如何让图像在 DIV 中滚动而不是在父级或文档中滚动?

我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Force Scroll</title>
    <style type="text/css">
        .scrollable 
        {
            overflow: auto;
        }
    </style>
</head>
<body>

<div class="scrollable">
    <img src="image.jpg" alt="test image" />
</div>

</body>
</html>

最佳答案

为 div 设置一个(最大)宽度和高度,它应该可以工作。否则 div 将自行调整以适应图像的大小:

#mydiv {
  overflow: auto;

  max-width: 800px;  // or width instead of max-width
  max-height: 600px; // or height instead of max-height
}

此处示例:http://jsfiddle.net/x58RD/ .


如果碰巧你被迫支持IE6这样的老式浏览器,你需要使用widthheight而不是max-widthmax-height 无论如何,否则它仍然无法工作。

关于html - 滚动包含图像的 DIV,而不是文档,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6521798/

相关文章:

html - 将背景颜色与图像重叠,但不与内容重叠

javascript - 由于父元素的顶部和位置,子元素点击不起作用

javascript - 点击按钮时如何跳转到另一个 HTML 页面

javascript - 在不反转顶部的情况下反转 HTML 表格的行

html - 输入文件的图像标签不可点击

css - 重复时背景图像清晰,否则模糊

html - 我如何从 Perl 中的 HTML 表格中提取数据?

css - 现在保留这些 "-webkit-" "-moz-" "-o-" "-ms-"前缀有多大必要? (截至 2019 年 12 月)

html - 导航子菜单将下方的 div 向下推(响应)

javascript - 在子元素内移动多个元素