CSS控制圖片大小-適應(yīng)寬度
更新時間:2008年07月19日 12:57:10 作者:
以前一直用js控制圖片的大小,有的時候我們的廣告也會被變得很小,所以一般都是直接在內(nèi)容區(qū)控制,圖片大小,這個方法用css 的expression方法
不知道家有沒有遇到過這樣的情況:在CSS控制圖片大小時,如果把圖片的寬度寫死,比如 img{width:500px;} ,固然,如果圖片寬度大于500px可以很好的控制它不讓它過大,但如果圖片寬度小于500px,比如說只有100px時,剛才的寫法會把這張圖擴大5倍顯示,顯然,這不是我們想看到的。
那么,CSS如何可以區(qū)分對待這些圖片設(shè)置大小呢?很簡單,請看:
img{width:expression(this.width>500?"500px":this.width+"px"); }
只要在CSS運用這段代碼,就可以分別控制大圖片與小圖片。它的意思就是,如果圖片寬度大于500px,那么圖片就以500px的大小顯示,如果小于的話,那么圖片就按照原有尺寸顯示!怎么樣,是不是確實很簡單?
弊端:增加客戶端的負荷,一般用js實現(xiàn)的比較多。
那么,CSS如何可以區(qū)分對待這些圖片設(shè)置大小呢?很簡單,請看:
復(fù)制代碼 代碼如下:
img{width:expression(this.width>500?"500px":this.width+"px"); }
只要在CSS運用這段代碼,就可以分別控制大圖片與小圖片。它的意思就是,如果圖片寬度大于500px,那么圖片就以500px的大小顯示,如果小于的話,那么圖片就按照原有尺寸顯示!怎么樣,是不是確實很簡單?
弊端:增加客戶端的負荷,一般用js實現(xiàn)的比較多。
相關(guān)文章
ul在Firefox和IE下的不同表現(xiàn)的解決方法
ul在Firefox和IE下的不同表現(xiàn)的解決方法...2007-08-08div+css在思路和流程上實現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離分析
內(nèi)容與表現(xiàn)分離,從標準到國人重視那天起,就已經(jīng)討論了,但是停留在div+css xhtml+css 純代碼的分離,思想上流程上,到底如何分離?2008-08-08