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

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

Here's a quick example of background-size.

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

Answer 4

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

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

4 个答案: