东坡下载:内容最丰富最安全的下载站!

首页IT技术软件教程 → 等比例CSS控制图片大小的方法兼容IE6/IE8

等比例CSS控制图片大小的方法兼容IE6/IE8

相关文章发表评论 来源:本站原创时间:2013/9/9 10:02:07字体大小:A-A+

更多

作者:不详点击:2693次评论:0次标签: 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);
}

扩展知识

相关评论

阅读本文后您有什么感想? 已有 人给出评价!

  • 2791 喜欢喜欢
  • 2101 顶
  • 800 难过难过
  • 1219 囧
  • 4049 围观围观
  • 5602 无聊无聊
热门评论
最新评论
昵称:
表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
字数: 0/500 (您的评论需要经过审核才能显示)

本类常用软件