Javascript 根据浏览器窗口尺寸自动调整图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4572621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto image resize based on browser window dimensions
提问by Dkong
I have a basic web page layout with a 100% width header and a sticky footer. In between the two I have a large graphic.
我有一个带有 100% 宽度页眉和粘性页脚的基本网页布局。在两者之间，我有一个大图形。
I would like the graphic to resize dynamically depending on the size of the window.
我希望图形根据窗口的大小动态调整大小。
I prefer not to use flash, and was wondering if there is an easy way to do this with jquery/javascript.
我不喜欢使用 flash，并且想知道是否有一种简单的方法可以使用 jquery/javascript 来做到这一点。
I'm not much of a jquery/javascript expert so I was wondering how to approach this of there is a component out there that already does it.
我不是一个 jquery/javascript 专家，所以我想知道如何解决这个问题，那里有一个组件已经做到了。
回答by Alan
<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>
This will resize your image to match your container and keep the ratio in place. If you set the container to a percentage everything will scale.
这将调整您的图像大小以匹配您的容器并保持比例不变。如果您将容器设置为百分比，则一切都会缩放。
wrapper width = 960px divided by screen width = 1640px
包装宽度 = 960px 除以屏幕宽度 = 1640px
If you want the entire site to be responsive you have to do the math all the way down. divide the child by it's parent. Hope this helps!
如果您希望整个网站都具有响应性，则必须一直进行数学计算。将孩子除以它的父母。希望这可以帮助！
回答by Babiker
Set the image containers width in percent as in width:{amount}%;, then set the image's width in percent also. This way your image container expands as your image expands also, or at least it will seem like so, because the image is actually expanding as the container expands. You dont necessarily need to set the image width to 100%, but whatever with you set is relative the containers width.
以百分比为单位设置图像容器宽度width:{amount}%;，然后也以百分比为单位设置图像的宽度。这样，您的图像容器也会随着图像的扩展而扩展，或者至少看起来是这样，因为图像实际上是随着容器的扩展而扩展的。您不一定需要将图像宽度设置为 100%，但是无论您设置什么，都是相对于容器宽度的。
回答by Xenethyl
If you're willing to rely on CSS3 and display your image as a background in an element, consider using background-size. Going this route allows you to resize the image while preserving its aspect ratio.
如果您愿意依赖 CSS3 并将图像显示为元素中的背景，请考虑使用background-size. 走这条路线允许您调整图像大小，同时保持其纵横比。
Here's a quick example of background-size.
This can of course be done manually if you monitor the window size using JS and resize accordingly. If you are interested in going this route, let us know. I would advocate using a pure CSS solution for something so trivial, if possible, so you don't alienate users with JS disabled.
如果您使用 JS 监视窗口大小并相应地调整大小，这当然可以手动完成。如果您有兴趣走这条路线，请告诉我们。如果可能的话，我会提倡将纯 CSS 解决方案用于如此微不足道的事情，这样您就不会疏远禁用 JS 的用户。
回答by Gabriel
img.thespecialimage {
min-height : 100%;
min-width : 100%;
max-height : 100%;
max-width : 100%;
}
