如何动态调整图像尺寸与CSS的浏览器的宽度/高度的变化？ [英] How can I resize an image dynamically with CSS as the browser width/height changes?

问题描述

我不知道如何才能与浏览器窗口的图像大小调整以来，这里 是我做了什么到目前为止（或下载在一个ZIP 整个网站）。

I wonder how I could make an image resize along with the browser window, here is what I have done so far (or download the whole site in a ZIP).

这在Firefox不错，但它在Chrome的问题：图像并不总是调整，它在某种程度上取决于当页面加载窗口的大小

This works okay in Firefox, but it has problems in Chrome: the image does not always resize, it somehow depends on the size of the window when the page was loaded.

这也是在Safari工作好，但有时加载图像，其最小宽度/高度。也许这是由图像尺寸造成的，我不知道。 （如果它加载好，尝试刷新几次看到错误。）

This also works okay in Safari, but sometimes the image is loaded with its minimum width/height. Maybe this is caused by the image size, I am not sure. (If it loads okay, try to refresh several times to see the bug.)

这是我怎么能做出这样更稳固的任何想法？ （如果未将JavaScript将需要我可以忍受了，但是CSS是preferable。）

Any ideas on how could I make this more bulletproof? (If JavaScript will be needed I can live with that, too, but CSS is preferable.)

推荐答案

此的可以用纯CSS完成，甚至不需要媒体查询。

This can be done with pure CSS and does not even require media queries.

，使图像灵活，只需添加最大宽度：100％和height：汽车。图像最大宽度：100％和height：在IE7自动工作，但不是在IE8（是的，另一个奇怪的IE漏洞）。为了解决这个问题，你需要添加宽度：汽车\\ 9 IE8。

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

来源：<一个href=\"http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries\">http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS：

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

如果你要强制图像的固定的最大宽度，只需将它放在一个容器内，例如：

And if you want to enforce a fixed max width of the image, just place it inside a container, for example:

<div style="max-width:500px;">
    <img src="..." />
</div>

这里 的jsfiddle例子。不需要的JavaScript。作品在Chrome，Firefox和IE浏览器（这是所有我测试过）的最新版本。

jsFiddle example here. No javascript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).

这篇关于如何动态调整图像尺寸与CSS的浏览器的宽度/高度的变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！