CSS中怎么同比例縮小圖片

本篇文章給大家分享的是有關(guān)CSS中怎么同比例縮小圖片，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

符合Web標(biāo)準(zhǔn)!CSS同比例縮小圖片

當(dāng)然，生成縮略圖這個工作如果交給程序來完成，效果會好很多，但是有時出于某種因素，例如服務(wù)器不支持GD之類的，難免就要請CSS代勞。

把一副大圖片按比例縮小到某個尺寸，對于現(xiàn)代瀏覽器，直接使用max-width和max-height兩條CSS屬性即可。

對于IE 6.0及以下版本，以上兩條CSS屬性均不會被理會。之前處理這種事情，我們往往會借助Javascript，然后為圖片加上onload事件。例如：

Example Source Code

<imgsrcimgsrc="..."alt="..."onload="resizeImage(this)"/>   <script type="text/javascript">   functionresizeImage(obj){   objobj.width=obj.width>50&&obj.width>obj.height?50:auto;   objobj.height=obj.height>50?50:auto;   }   </script>

這固然能解決問題，但是對以后頁面的升級會帶來麻煩——隨著瀏覽器對CSS支持的完善，我們遲早會把圖片上的onload事件統(tǒng)統(tǒng)去除。該是Expression的Show Time了，既然IE支持通過Expression在CSS中放置一些腳本，而這段腳本又只是提供給IE 6.0及以下版本使用，那么把它寫到Expression中再合適不過。

最終，把一副大圖片按比例縮小到50px*50px以內(nèi)，可以參照以下這段CSS：

Example Source Code

.thumbImage{   max-width:50px;   max-height:50px;   }   *html.thumbImage{   width:expression(this.width>50&&this.width>this.height?50:auto);   height:expresion(this.height>50?50:auto);   }

至于圖片是如何保持其高寬比例的，這張圖片可以解釋：

以上就是CSS中怎么同比例縮小圖片，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。