首頁 > web前端 > css教學 > 主體

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

WBOY
發布: 2016-05-16 12:05:26
原創
1863 人瀏覽過

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

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

複製程式碼 程式碼如下:

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

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

弊端:增加客戶端的負荷,一般用js實現的比較多。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板