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

Question

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

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

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

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

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

Answer 1

Вместо window.innerHeight и window.innerWidth вы можете попробовать использовать percentage.That будет изменить размер изображения в соответствии с высотой окна andwidth.

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

Answer 2

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

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

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

Answer 3

Ну, так как это необходимо только для целей тестирования, и кажется, что вы используете 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>​ 

DEMO:http://jsfiddle.net/GvRJ7/

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