img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
img 按父容器宽度自动缩放,并且保持图片原本的长宽比
<div style="width:50px;height:40px">
<img src="a.jpg">
<!--这里我们假如图片的实际尺寸是320X320-->
</div>
实际尺寸会是: {height:40px; width:40px}
可单独设置width 或者height ,图片保持等比例缩放.
也可以通过js的onload来解决问题
<script>
function changeImg(o, w, h){ //w:max-width; h:max-height
var p = w*1.0/h,
w1 = o.width, h1=o.height,
p1=w1*1.0/h1;
if(p1>p){//使用w
o.width = w;
o.height = h1*w/w1;
}else{//使用h
o.height = h;
o.width = w1*h/h1 } }
</script>
<img src='' οnlοad="changeImg(this,200,100)" />