0

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

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

这是我正在使用的代码：

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

上面的代码不能正常工作。我想在用户调整窗口大小时动态更改图像的高度和宽度。我也尝试实施此解决方案。但这也没有用。任何想法我该如何解决这个问题？

4

3 回答 3

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 标记来使您的设计适合任何分辨率。

于 2012-05-07T10:31:30.880 回答
0

您可以尝试使用百分比代替window.innerHeight和window.innerWidth。这将根据窗口的高度和宽度调整图像的大小。

document.write("<img src='sample_image.jpg' border='0' height='"70%"' width='"70%"'>");
于 2012-05-07T10:27:37.720 回答
0

想想window.resize()火灾的频率（如果你有任何疑问，console.log()它）。只应在其中执行廉价的操作，例如递增计数器或计算位置。

在您的特定情况下，我认为 100% 宽度/高度的图像将仅使用 CSS（或使用 JavaScript 生成的 CSS，如果需要）。当然，当图像超出其实际大小时，这看起来会很糟糕，并且当图像低于其实际大小时会浪费带宽，但它会以一小部分费用对您的代码产生相同的效果。

附带说明一下，应该很少使用 document.write()。请改用 DOM 操作函数。

于 2012-05-07T10:27:44.957 回答