根据浏览器窗口尺寸自动调整图像大小答案

【问题标题】：Auto image resize based on browser window dimensions根据浏览器窗口尺寸自动调整图像大小
【发布时间】：2013-05-02 23:26:10
【问题描述】：

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

我希望图形根据窗口大小动态调整大小。

我不喜欢使用 flash，并且想知道是否有一种简单的方法可以使用 jquery/javascript 来做到这一点。

我不是 jquery/javascript 专家，所以我想知道如何解决这个问题，因为那里有一个组件已经做到了。

【问题讨论】：

使用他们最有可能帮助你的百分比，就像 Babiker 提到的那样

标签： javascript jquery css

【解决方案1】：

<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>

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

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

如果您希望整个网站都具有响应性，则必须从头到尾进行计算。将孩子除以它的父母。希望这会有所帮助！

【讨论】：

【解决方案2】：

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

【讨论】：

或者，设置height:...%。这将是定位父级高度的百分比。如果你只设置宽度或高度，另一个会根据图片的纵横比为你计算。
这不会导致图像失真吗？

【解决方案3】：

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

Here's a quick example of background-size.

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

【讨论】：

【解决方案4】：

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

【讨论】：

加布里埃尔，我会试试这个。你知道它是否适用于所有浏览器吗？
根据环境（如果您愿意使用 CSS3），适当的缩放可能会有所帮助：robertnyman.com/css3/background-size/background-size.html
@Xenethyl 您应该将其发布为答案，我会对此表示赞同。 @Dkong 您可能会在 IE5 中发现一些奇怪之处，在 IE6 中可能会发现一些奇怪之处，但这应该适用于其他任何地方。
完成！我也同意 IE 在处理最小和最大 CSS 设置时会成为问题浏览器。据我所知，其他主要浏览器可以很好地处理这些选项。