Невозможно изменить размер изображения шириной 100%, когда браузер становится меньше - PullRequest
Новая
       45

Невозможно изменить размер изображения шириной 100%, когда браузер становится меньше

2 голосов
/ 24 апреля 2011

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 должны игнорировать размеры изображения при расчете ширины и высоты документа.

1 Ответ

0 голосов
/ 25 апреля 2011

Если это окно, которое вы хотите иметь ширину, а не текущую ширину документа (с вашим изображением, которое делает его шире), почему бы просто не использовать это ?

...