在div中自动调整图像大小

Question

因此，我正在为用户构建此自定义管理面板，以便轻松地将自己的网站数据构建到模板集合中。我遇到的主要问题是处理图像。一个模板上有一个div，分别是380px到150px。我的问题是：

有没有办法自动调整图像大小以适应div并且还没有拉伸或剪辑？我对所有解决方案持开放态度，但如果它在IE中工作那将是非常棒的。提前致谢。

Answer 1

是的，那就是：

#your_div.div{
    width:380px;
    height:150px;
}
#your_div img{
    max-width:100%;
    max-height:100%;
}

图像可能会调整大小但不会失真，您可能还会在某处留下一些“空白”空间，但这在逻辑上是可以预期的。

Answer 2

您可以使用jQuery来完成此任务。如果图像是动态添加的（动态），您可以利用.live（）...

$('.someDivClass').children('img').live(function(){

var desiredWidth = /* your own logic here */;
$(this).width(desiredWidth);

});

或者，您也可以定位图像的高度（或两者）。