CSS自動控製圖片大小的代碼

標籤：

CSS自動控製圖片大小的代碼

有很多朋友會發現本站的文章中的圖片如果圖片比較大你會發現圖片自動隱藏了並且有一部份看不到了，那麼我們下面就來給大家介紹利用CSS自動控製圖片大小吧，有需要瞭解的朋友可進入參考。

Css防止圖片尺寸過大

添加如下CSS：

代碼如下	複製代碼
img {   max-width: 800px;   height: auto;   }

代碼中的max-width:800px限制圖片的最大寬度為800像素，而下面的hight:auto很關鍵，可以保證圖片有正確的長寬比，不至於因為被調整寬度而變形。

實用例子

WordPress自動調整圖片大小

1、開啟你的“樣式表 (style.css)”檔案，然後在 p img{ 或類似的地方添加下列代碼（可以將所有550改成你想要的寬度）

代碼如下	複製代碼
p img{ max-width: 550px; width: expression(this.width > 550 ? "550px" : true); height: auto; }

2、清空緩衝就可以啦！  
3、同樣對於某些老版本IE不支援。

如果你想兼職所有瀏覽器jq或js是最好的辦法

代碼如下

複製代碼

//  方法：setSelectReadOnly  用於設定極select控制項ReadOnly,  //這個一個類比唯讀不是真的唯讀  //使用了onbeforeactivate,onfocus,onmouseover,onmouseout事件  //樣本：< img src=‘img.jpg‘ onload=‘ImgAutoSize(ImgD,FitWidth,FitHeight)‘ > ;  //  create by sl   // ---------------------------------------------------  function ImgAutoSize(imgD,FitWidth,FitHeight)   {  var image1=new Image();   image1.onload = function ()  {  if(this.width>0 && this.height>0)   {   if(this.width/this.height>= FitWidth/FitHeight)   {   if(this.width>FitWidth)   {   imgD.width=FitWidth;   imgD.height=(this.height*FitWidth)/this.width;   }   else   {   imgD.width=this.width;   imgD.height=this.height;   }   }   else   {   if(this.height>FitHeight)   {   imgD.height=FitHeight;   imgD.width=(this.width*FitHeight)/this.height;   }   else   {   imgD.width=this.width;   imgD.height=this.height;   }   }   }  image1 = null;  } image1.src=imgD.src;   imgD.style.cursor = ‘hand‘;  imgD.onclick= function(){openWin(this.src,‘imgphoto‘,600,400)};  imgD.title = "點擊在新視窗中查看原圖";  }

上一篇12

 

CSS自動控製圖片大小的代碼