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？

当浏览器变小时，无法调整100％宽度图像的大小

1 个答案: