Осложнения с использованием функции javascript onresize

Question

Я работаю над прототипом проекта, в котором мне нужно настроить внешний вид содержимого сайта в соответствии с размером окна браузера.

Теперь для прототипа я использую образец изображения и хочу настроить высоту и ширину изображения в соответствии с высотой и шириной окна.

Вот код, который я использую

$(window).resize(function() {
   document.write("<img src='sample_image.jpg' border='0' height='"+window.innerHeight+"' width='"+window.innerWidth+"'>");
});

Приведенный выше код не работает должным образом. Я хочу динамически изменять высоту и ширину изображения, когда пользователь изменяет размеры окна. Я также попытался реализовать это решение. Но это тоже не сработало. Любые идеи, как я могу решить это?

Answer 1

Ну, так как это нужно только для целей тестирования, и кажется, что вы используете jQuery, попробуйте этот код:

<img src="sample_image.jpg" border='0' height="1" width="1" style="display: block;">

<script>
    var resize = function() {
        $("img").width($(window).width()).height($(window).height());            
    };
    $(window).resize(function() {
       resize();
    });
    resize();
</script>​

ДЕМО: http://jsfiddle.net/GvRJ7/

В противном случае я и другие ребята здесь настоятельно рекомендуем вам использовать хорошую разметку HTML/CSS, чтобы ваш дизайн соответствовал любому разрешению.

Answer 2

Вместо window.innerHeight и window.innerWidth вы можете попробовать использовать процент. Это изменит размер изображения в соответствии с высотой и шириной окна.

document.write("<img src='sample_image.jpg' border='0' height='"70%"' width='"70%"'>");

Answer 3

Подумай как часто window.resize() пожары (если у вас есть какие-либо сомнения, console.log() Это). Внутри него должны выполняться только недорогие операции, такие как увеличение счетчика или расчет позиции.

В вашем конкретном случае, я думаю, что изображение шириной / высотой 100% будет работать с использованием только CSS (или CSS, сгенерированного с помощью JavaScript, если необходимо). Конечно, это будет выглядеть плохо, когда изображение выходит за пределы его реального размера, и тратить полосу пропускания, когда оно будет ниже его реального размера, но это будет иметь эквивалентный эффект для вашего кода с меньшими затратами.

Как примечание, document.write() должен использоваться редко. Вместо этого используйте функции манипулирования DOM.