CSS控制圖片大小-適應(yīng)寬度
更新時(shí)間：2008年07月19日 12:57:10 作者：
以前一直用js控制圖片的大小，有的時(shí)候我們的廣告也會(huì)被變得很小，所以一般都是直接在內(nèi)容區(qū)控制，圖片大小，這個(gè)方法用css 的expression方法
不知道家有沒有遇到過這樣的情況：在CSS控制圖片大小時(shí)，如果把圖片的寬度寫死，比如 img{width:500px;} ，固然，如果圖片寬度大于500px可以很好的控制它不讓它過大，但如果圖片寬度小于500px，比如說只有100px時(shí)，剛才的寫法會(huì)把這張圖擴(kuò)大5倍顯示，顯然，這不是我們想看到的。
那么，CSS如何可以區(qū)分對(duì)待這些圖片設(shè)置大小呢？很簡(jiǎn)單，請(qǐng)看：
img{width:expression(this.width>500?"500px":this.width+"px"); }
只要在CSS運(yùn)用這段代碼，就可以分別控制大圖片與小圖片。它的意思就是，如果圖片寬度大于500px，那么圖片就以500px的大小顯示，如果小于的話，那么圖片就按照原有尺寸顯示！怎么樣，是不是確實(shí)很簡(jiǎn)單？
弊端：增加客戶端的負(fù)荷，一般用js實(shí)現(xiàn)的比較多。
那么，CSS如何可以區(qū)分對(duì)待這些圖片設(shè)置大小呢？很簡(jiǎn)單，請(qǐng)看：
復(fù)制代碼 代碼如下:
img{width:expression(this.width>500?"500px":this.width+"px"); }
只要在CSS運(yùn)用這段代碼，就可以分別控制大圖片與小圖片。它的意思就是，如果圖片寬度大于500px，那么圖片就以500px的大小顯示，如果小于的話，那么圖片就按照原有尺寸顯示！怎么樣，是不是確實(shí)很簡(jiǎn)單？
弊端：增加客戶端的負(fù)荷，一般用js實(shí)現(xiàn)的比較多。
相關(guān)文章
用滑動(dòng)門技術(shù)設(shè)計(jì)按鈕的圖文教程
用滑動(dòng)門技術(shù)設(shè)計(jì)按鈕的圖文教程...2007-07-07
ul在Firefox和IE下的不同表現(xiàn)的解決方法
ul在Firefox和IE下的不同表現(xiàn)的解決方法...2007-08-08
滾動(dòng)條效果...2006-11-11
SPAN元素和DIV元素有的區(qū)別...2007-02-02
div+css在思路和流程上實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離分析
內(nèi)容與表現(xiàn)分離，從標(biāo)準(zhǔn)到國人重視那天起，就已經(jīng)討論了，但是停留在div+css xhtml+css 純代碼的分離，思想上流程上，到底如何分離？2008-08-08
今天遇到一個(gè)神奇的問題：下面是代碼 代碼在IE7中正常顯示，IE6什么也不顯示。2008-05-05
Div+Css(+Js)菜單代碼及制作工具...2006-12-12
em px的關(guān)系...2007-01-01
之所以說IE不好，是因?yàn)镮E會(huì)誤導(dǎo)了你對(duì)CSS模型的理解，讓你以為IE的理解是對(duì)的，之后無論如何你都無法用你的IE模型理論去為你那個(gè)無法在FF正常顯示的CSS提供fix。2008-09-09
今天要講的內(nèi)容是如何實(shí)現(xiàn)“首字下沉”，，第一個(gè)字是很大的紅色楷體，陷于一段文字之首。這種做法在雜志中常見，但是在網(wǎng)頁中不那么常見。那么如何實(shí)現(xiàn)呢？其實(shí)很簡(jiǎn)單，只有一句CSS就可以了。2008-07-07