首頁  >  文章  >  web前端  >  CSS控制圖片大小-適應寬度_經驗交流

CSS控制圖片大小-適應寬度_經驗交流

WBOY
WBOY原創
2016-05-16 12:05:261858瀏覽

不知道家有沒有遇過這樣的情況:在CSS控制圖片大小時,如果把圖片的寬度寫死,比如 ​​img{width:500px;} ,固然,如果圖片寬度大於500px可以很好的控制它不讓它過大,但如果圖片寬度小於500px,比如說只有100px時,剛才的寫法會把這張圖擴大5倍顯示,顯然,這不是我們想看到的。

    那麼,CSS如何可以區分對待這些圖片設定大小呢?很簡單,請看: 

複製程式碼 程式碼如下:

img{ width:expression(this.width>500?"500px":this.width "px"); }

    只要在CSS運用這段程式碼,就可以分別控制大圖片與小圖片。它的意思就是,如果圖片寬度大於500px,那麼圖片就以500px的大小顯示,如果小於的話,那麼圖片就按照原有尺寸顯示!怎麼樣,是不是確實很簡單呢?

弊端:增加客戶端的負荷,一般用js實現的比較多。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn