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

Question

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

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

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

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

Answer 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

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

Answer 2

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

Answer 3

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