CSS控制图片大小的方法

网页制作技巧实例解决:用CSS控制图片自适应大小

    图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?

可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示。

解决方案:

 一、   对于标准浏览器(如Firefox),或者最新都IE7浏览器,直接使用max-width,max-height;或者min-width,min-height的CSS属性即可。如:

我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了。我们看下面的代码:

img{
  max-width:100px;
  max-height:100px;
  overflow:hidden;
}


二、对于IE6及其以下版本的浏览器,则可以利用其支持的expression属性,在css code中嵌入javascript code来实现图片的缩放:

img{ 
  width:expression(this.width>150?"150px":this.width); 
  height:expression(this.height>150?"  150px":this.height); 
}

三、完美解决方案

img{ 
  border:0; 
  margin:0; 
  padding:0; 
  max-width:150px; 
  width:expression(this.width>150?"150px":this.width); 
  max-height:150px; 
  height:expression(this.height>150?"  150px":this.height); 
}


参考地址:
http://www.cnblogs.com/liukai/archive/2009/12/29/1635397.html
http://www.php100.com/html/webkaifa/DIV_CSS/2008/1124/2362.html
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值