如何随着浏览器宽度/高度的变化dynamic调整图像的大小？
我想知道如何使浏览器窗口的图像大小调整， 这是我迄今为止所做的（或下载整个网站的ZIP ）。
这在Firefox中可以正常工作，但是在Chrome中有问题：图片不会总是resize，它在某种程度上取决于页面加载时的窗口大小。
这也可以在Safari浏览器中正常工作，但有时图像会以最小宽度/高度加载。 也许这是由图像尺寸造成的，我不确定。 （如果加载正常，请尝试刷新几次以查看错误。）
任何想法，我怎么能使这更加防弹？ （如果JavaScript需要的话，我也可以忍受，但CSS是可取的。）
这可以用纯CSS完成，甚至不需要媒体查询。
为了使图像更灵活，只需添加
max-width:100%和height:auto。 图像max-width:100%和height:auto在IE7中，但不是在IE8（是的，另一个奇怪的IE错误）。 要解决这个问题，你需要为IE8添加width:auto\9。来源： http : //webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
CSS：
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
如果你想强制图像的最大宽度，只要把它放在一个容器内，例如：
<div style="max-width:500px;"> <img src="..." /> </div>
JSFiddle的例子在这里 。 不需要JavaScript。 适用于最新版本的Chrome，Firefox和IE（这是我testing过的）。
window.onresize = function(){ var img = document.getElementById('fullsize'); img.style.width = "100%"; };
在IE onresize事件被触发每一个像素的变化（宽度或高度），所以可能会有性能问题。 使用javascript的window.setTimeout（）延迟几毫秒的图像大小调整。
http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
将resize属性设置为两者。 那么你可以像这样改变宽度和高度：
.classname img{ resize: both; width:50px; height:25px; }
你使用jQuery吗？
因为我做了一个快速searchjQuery插件，他们似乎有一些插件来做到这一点，检查这一个，应该工作：
http://plugins.jquery.com/project/jquery-afterresize
编辑：
这是CSS解决scheme，我只是添加一个style =“width：100％” ，至less在Chrome和Safari中适用于我。 我没有ie，所以只是在那里testing，让我知道，这里是代码：
<div id="gallery" style="width: 100%"> <img src="images/fullsize.jpg" alt="" id="fullsize" /> <a href="#" id="prev">prev</a> <a href="#" id="next">next</a> </div>
您可以使用CSS3 scale属性来调整图像与CSS：
.image:hover { -webkit-transform:scale(1.2); transform:scale(1.2); } .image { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
进一步阅读 ：
- CSS3 2D变换
- CSS3hover效果转换，转换，animation
最初，我正在使用下面的HTML / CSS：
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
<div> <img src="..." /> </div>
然后，我像这样添加了class="img"到<div> ：
<div class="img"> <img src="..." /> </div>
一切都开始正常工作。
