Question

我正在研究项目的原型，我需要根据浏览器窗口大小调整网站内容的外观。

现在对于原型我正在使用样本图像，我想根据窗口的高度和宽度调整图像的高度和宽度。

这是我正在使用的代码

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

上述代码无法正常运行。我想在用户调整窗口大小时动态更改图像的高度和宽度。我也尝试过实施this solution。但那也没有用。任何想法如何解决这个问题？

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>

DEMO： 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（或者如果需要的话用JavaScript生成的CSS）。当然，这会看起来很糟糕，因为图像超出了它的实际尺寸，并且当它低于它的实际尺寸时会浪费带宽，但它会以相当大的代价对你的代码产生影响。

作为旁注，应该很少使用document.write（）。改为使用DOM操作函数。

使用javascript onresize函数的并发症

3 个答案: