Can't resize a 100% width image down when the browser gets smaller
tl;dr: When an image takes up 100% width and height and the user resizes their browser down, the width and the height of the document don't change because the image keeps it from shrinking.
I have a dynamically drawn SVG image (created by RaphaelJS) that takes up 100% of the screen width and height. The space it takes up includes space that is not visible but can be seen by scrolling (so it's not just viewport width and height, it is possible for it to go beyond that). I need to resize the SVG canvas to the size of the document so that scrollbars won't appear just for the image when the user resizes his browser smaller and so that the image won't appear to be cut-off when the user resizes the browser to be bigger.
The resizing up works fine, but there is a glitch in resizing down. When the user resize开发者_如何学编程s from small to big, this works fine and the SVG expands to fit the window, but when the user resizes from big to small, the actual image keeps the document from becoming smaller because it is part of the document. The effect is that the image will grow but never shrink, causing scrollbars just for the image, even though the actual content all fits inside the screen.
Here is how I currently calculate the size of the SVG canvas:
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
function getDocWidth() {
var D = document;
return Math.max(
Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
Math.max(D.body.clientWidth, D.documentElement.clientWidth)
);
}
So how can I get the image not to keep the document from getting smaller? Basically the getDocWidth and -Height needs to ignore the dimensions of the image when it calculates the width and height of the document.
If it's the window you want the width of rather than the current width of the document (with your image in it, making it wider), why not just use that?
精彩评论