IE 或 Firefox 无法自动调整大小答案

【问题标题】：IE or Firefox not autoresizingIE 或 Firefox 无法自动调整大小
【发布时间】：2013-05-15 10:03:07
【问题描述】：

首先，我对此很陌生，已经做了很多研究，但找不到答案。

我已将页面顶部的 div 容器设置为 100% 宽度和 20% 高度。我想插入一个可以在不同屏幕尺寸之间自动调整大小的图像。

我在这个网站上发现了一些代码，它们在 safari 和 chrome 中完美运行（在 ipad 和 iphone 上也可以完美调整大小），但在 firefox(20) 和 IE(10) 中，图像确实会稍微调整大小，但不会留在父容器中.

有人可以帮忙吗？我一直使用的原始代码是：

<html>
<style type="text/css">
#myDiv 
{
height:auto;
width:auto;
}
#myDiv img
{
max-width:100%; 
max-height:100%;
margin:auto;
display:block;
}
</style>


<div id="myDiv">
<img src="images/storm.jpg">
</div>
</html>

任何帮助将不胜感激（请记住我正在学习！）

【问题讨论】：

标签： image firefox html tags image-resizing

【解决方案1】：

#myDiv img
{
width:100%; 
height:100%;
margin:auto;
display:block;
}

您需要将图像的实际宽度/高度设置为 100%，而不是最大宽度和最大高度。

【讨论】：

感谢您的回复，不幸的是它不起作用，它只是拉伸了图像。从我所见，图像绑定到 Safari 和 Chrome 中容器 div 标签的大小，但在 IE 和 Firefox 中被忽略，因此您可以得到图像大小的 100% 忽略容器大小，所以当它被缩小或扩大时，它不会调整大小。还有其他想法吗？