img等比例缩放


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)" />


牧飞

                
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值