当浏览器变小时，无法缩小 100% 宽度的图像

Question

tl;dr：当图像占据 100% 的宽度和高度并且用户缩小浏览器的大小时，文档的宽度和高度不会改变，因为图像会阻止它缩小。

---

我有一个动态绘制的 SVG 图像（由 RaphaelJS 创建），它占据了 100% 的屏幕宽度和高度。它占用的空间包括不可见但可以通过滚动看到的空间（因此它不仅仅是视口的宽度和高度，它可能超出此范围）。我需要将 SVG 画布的大小调整为文档的大小，这样当用户调整浏览器的大小时，滚动条不会只出现在图像上，并且当用户调整大小时，图像不会被截断浏览器要大。

调整大小工作正常，但调整大小时出现故障。当用户从小到大调整大小时，这可以正常工作，并且 SVG 会展开以适合窗口，但是当用户从大到小调整大小时，实际图像阻止文档变小，因为它是文件的一部分。其效果是图像会增大但不会缩小，从而导致仅针对图像的滚动条，即使实际内容都适合屏幕。

这是我目前计算 SVG 画布大小的方法：

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)
    );
}

那么我怎样才能让图像不让文档变小呢？基本上 getDocWidth 和 -Height 在计算文档的宽度和高度时需要忽略图像的尺寸。

Answer 1

如果它是您想要宽度的窗口而不是文档的当前宽度（其中包含您的图像，使其更宽），为什么不只是use that？