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

網(wǎng)站的建設(shè)創(chuàng)新互聯(lián)建站專注網(wǎng)站定制,經(jīng)驗豐富,不做模板,主營網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁面制作!給你煥然一新的設(shè)計體驗!已為成都銅雕雕塑等企業(yè)提供專業(yè)服務(wù)。

符合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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：CSS中怎么同比例縮小圖片
鏈接URL：http://aaarwkj.com/article48/gooiep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、自適應(yīng)網(wǎng)站、微信小程序、、網(wǎng)站收錄、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)