Html 滚动包含图像而不是文档的 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6521798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll DIV which contains image, not Document
提问by capdragon
I have a large image within a div which i want to scroll. But instead of the div scrolling, i have the document scrolling.
我在 div 中有一个大图像，我想滚动它。但不是 div 滚动，我让文档滚动。
How can i get the image to scroll within the DIV and NOT the parent or document?
如何让图像在 DIV 中滚动而不是父级或文档？
My code:
我的代码：
<!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>
回答by
Set a (max) width and height for the div and it should work. Otherwise the div will just adjust itself to the size of the image:
为 div 设置（最大）宽度和高度，它应该可以工作。否则 div 只会根据图像的大小自行调整：
#mydiv {
overflow: auto;
max-width: 800px; // or width instead of max-width
max-height: 600px; // or height instead of max-height
}
Example here: http://jsfiddle.net/x58RD/.
这里的例子：http: //jsfiddle.net/x58RD/。
If it happens that you are forced to support ancient browsers like IE6, you need to use widthand heightinstead of max-widthand max-heightanyways or it still won't work.
如果碰巧你被迫支持像 IE6 这样的古老浏览器，你需要使用widthandheight而不是max-widthandmax-height无论如何，否则它仍然无法工作。
回答by Jrod
You need to define a width and height. Divs are block elements and will take up as much space as needed. In this case as large as the image is.
您需要定义宽度和高度。Div 是块元素，会根据需要占用尽可能多的空间。在这种情况下，与图像一样大。
回答by bravedick
you need to fix size of div, for example:
您需要修复 div 的大小，例如：
width: 200px;
height: 200px;
