Question

首先，我是新手，已经做了很多研究，但找不到答案。

我在页面顶部设置了一个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>

任何帮助都会受到赞赏（请记住我正在学习！）

Answer 1

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

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

IE或Firefox不自动调整大小

1 个答案: