云原生

网页制作技巧实例解决：用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); 
}

参考地址：