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

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

我希望图形根据窗口的大小动态resize。

我不想使用flash，并且想知道是否有一种简单的方法可以使用jquery / javascript。

我不是一个jquery / javascript专家，所以我想知道如何处理这个有一个已经做到的组件。

这将调整您的图像大小以匹配您的容器并保持比例到位。如果将容器设置为百分比，则一切都会缩放。

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

如果您希望整个网站都能做出响应，那么您必须完全按照数学方式进行操作。把孩子除以它的父母。希望这可以帮助！

将图像容器宽度设置为百分比， width:{amount}%; ，然后也以百分比设置图像的宽度。这样，您的图像容器也会随着图像的扩展而扩展，或者至少看起来像是这样，因为图像实际上随着容器的扩展而扩展。您不一定需要将图像宽度设置为100％，但无论您设置的是相对于容器宽度。

如果您愿意依赖CSS3并将图像显示为元素中的背景，请考虑使用background-size 。使用此路线可以在保留其宽高比的同时调整图像大小。

这是背景大小的快速示例。

如果您使用JS监视窗口大小并相应地resize，当然可以手动完成。如果您有兴趣走这条路线，请告诉我们。如果可能的话，我会提倡使用纯CSS解决方案来做一些微不足道的事情，这样你就不会疏远JS禁用的用户。

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