Javascript 基于浏览器窗口尺寸自动调整图像大小

我有一个基本的网页布局，有100%宽度的页眉和粘性的页脚。在两者之间，我有一个大的图形

我想图形动态调整大小取决于窗口的大小

我不喜欢使用flash，我想知道是否有一种简单的方法可以使用jquery/javascript实现这一点

---

我不是一个jquery/javascript专家，所以我想知道如何处理这个问题，因为有一个组件已经完成了这项工作。

将图像容器宽度的百分比设置为

宽度：{amount}%，然后以百分比为单位设置图像的宽度。这样，图像容器也会随着图像的扩展而扩展，或者至少看起来是这样，因为图像实际上是随着容器的扩展而扩展的。您不一定需要将图像宽度设置为100%，但是无论您设置的是什么，都与容器宽度相对应。
 < P>如果您愿意依赖CSS3并将图像显示为元素中的背景，请考虑使用<代码>背景尺寸< /代码>。按此路线可以调整图像大小，同时保留其纵横比

img.thespecialimage {
  min-height : 100%;
  min-width : 100%;
  max-height : 100%;
  max-width : 100%;
}


当然，如果您使用JS监视窗口大小并相应调整大小，则可以手动执行此操作。如果你有兴趣走这条路线，请告诉我们。如果可能的话，我会提倡使用纯CSS解决方案来解决一些琐碎的问题，这样你就不会疏远禁用JS的用户。

<style>
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;}
.resize {width:100%; height:auto;}
</style>    

<div class="wrapper">
  <img class="resize" src="image.jpg" />
</div>

.wrapper{width:58.536585%；/*960/1640=.58536585*/margin:0 auto；}
.resize{宽度：100%；高度：自动；}

这将调整图像大小以匹配容器，并保持比例不变。如果将容器设置为百分比，则所有内容都将缩放

包装宽度=960px除以屏幕宽度=1640px

如果你想让整个网站都能做出响应，你必须一路计算。将子对象除以其父对象。希望这有帮助
 加布里埃尔，我来试试。你知道它是否能在所有浏览器中工作吗？取决于环境（如果你愿意使用CSS3），适当的缩放可能会有所帮助：@Xenethyl你应该把它作为一个答案发布，我将对此进行投票@Dkong你可能会在IE5中发现一些奇怪的地方，在IE6中可能会发现一些，但这应该在其他地方都适用。完成了！我也同意IE在处理最小和最大CSS设置时会成为问题浏览器。据我所知，其他主要浏览器处理这些选项很好。使用百分比它们很可能会帮助您喜欢提到的Babiker。另外，设置
高度：…%
。这将是定位父对象高度的百分比。如果您只设置宽度或高度，另一个将根据图像的纵横比为您计算。这不会导致图像失真吗？