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

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

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

複製代碼 代碼如下:
img{width:expression(this.width>500?"500px":this.width+"px"); }

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

弊端:增加用戶端的負荷,一般用js實現的比較多。
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.