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

圖片自動適應(yīng)大小是一個非常常用的功能，在進(jìn)行制作的時候為了防止圖片撐開容器而對圖片的尺寸進(jìn)行必要的控制，我們可不可以用CSS控制圖片使它自適應(yīng)大小呢？

可以通過按比例縮小或者放大到某尺寸（自己指定），來保持圖片不變形走樣的完全顯示。

解決方案：

一、 對于標(biāo)準(zhǔn)瀏覽器（如Firefox），或者最新都IE7瀏覽器，直接使用max-width,max-height；或者min-width,min-height的CSS屬性即可。如：


我們想到了一個比較簡單的解決方法，雖然不是非常的完美，如果您的要求不是非常高，已經(jīng)可以滿足你的需要了。我們看下面的代碼：

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

二、對于IE6及其以下版本的瀏覽器，則可以利用其支持的expression屬性，在css code中嵌入javascript code來實現(xiàn)圖片的縮放：

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);
}