html - div 上的图像，并且与 div 的父级的比例不同。Firefox 和 IE9 的问题

Question

我在这里有一个链接（jsfidde）之类的代码。

简单的 ：

<div class="box"> 
  <img width="600" height="300" src="img.jpg"/>
</div>

.box{width:500px;}
.box img{max-width:100%;}

图像固定为永久大小（宽度和高度）。对于上述设计，Chrome 运行良好，但 Firefox 和 IE 出现错误（图像在 div 之外浮动）。帮我解决它。感谢所有建议。

Answer 1

在你的css中添加这个，这会让你的图像回到里面

img
{
height:auto;
width:auto;
display:block;
}

或者

.box-content{padding:10px; height:auto; width:100%;}
.box-content img{max-width:95%; text-align:center; height:auto; width:100%;}

添加width:100%到盒子里

更新的演示

Answer 2

尝试：我认为这就足够了。

.box{width:500px;}
.box img{width:100%;}