CSS expression控制圖片自動縮放效果代碼[兼容 IE,Firefox]
更新時間：2008年09月02日 00:29:33 作者：
一直以來有個很頭疼的問題困擾著我，那就是圖片縮放的問題，寫到 JS 里面吧，不太容易修改。寫到 CSS 里面吧，IE 6 又不支持 max-width
今天用了很久時間終于解決了這個問題，基本完美了，唯一不完美的就是 IE 6 只有在圖片完全下載完成后才會自動調(diào)整大小，不過聊勝于無，總比進(jìn)入頁面后看到長長的橫向滾動條舒服的多，這里使用了 expression，但是利用了一次加載，所以 expression 不會造成內(nèi)存泄漏。當(dāng)然，如果你有更好的解決方案，希望能與我交流。
代碼如下：
.Image { max-width:600px;height:auto;cursor:pointer; border:1px dashed #4E6973;padding: 3px; zoom:expression( function(elm) { if (elm.width>560) { var oldVW = elm.width; elm.width=560; elm.height = elm.height*(560 /oldVW); } elm.style.zoom = '1'; }(this)); }
代碼如下：
.Image { max-width:600px;height:auto;cursor:pointer; border:1px dashed #4E6973;padding: 3px; zoom:expression( function(elm) { if (elm.width>560) { var oldVW = elm.width; elm.width=560; elm.height = elm.height*(560 /oldVW); } elm.style.zoom = '1'; }(this)); }
相關(guān)文章
div+CSS網(wǎng)頁布局的意義與副作用原因小結(jié)
隨著WEB2.0標(biāo)準(zhǔn)化設(shè)計理念的普及，國內(nèi)很多大型門戶網(wǎng)站已經(jīng)紛紛采用DIV+CSS制作方法，從實際應(yīng)用情況來看，此種方法絕對好于表格制作頁面的方法。2008-09-09
html下利用javascript連數(shù)據(jù)庫
html下利用javascript操作本地數(shù)據(jù)庫的代碼2008-02-02
IE8 Beta1已出，其中我們能看到很多的新特性，如layout引擎將“完全”支持CSS2.1和HTML 5，所以和之前IE瀏覽器所使用的Layout引擎并不相同，之前的IE瀏覽器并不完全符合互聯(lián)網(wǎng)標(biāo)準(zhǔn)。2008-06-06
在制作網(wǎng)頁中，我們經(jīng)常需要用到下面的css，有朋友整理好的特給大家，大家可以看看，一定要記住2008-08-08
層自動適應(yīng)高度...2006-11-11
超贊的隨機(jī)顏色搭配工具...2007-05-05
我們都熟知JavaScript可能會對Web頁面的加載與顯示產(chǎn)生較大的影響，因此我們常常關(guān)注JavaScript是不是會占用客戶端較多的資源，然而大部分都會忽略的一件有趣的事情，CSS也會對Web頁面載入的效率產(chǎn)生影響。2008-05-05
CSS3實現(xiàn)動態(tài)翻牌效果 仿百度貼吧3D翻牌一次動畫特效
本文主要分享一個利用CSS3新特性transform，實現(xiàn)3D翻牌的特效，有需要的小伙伴可以參考下。2016-05-05
前端html+css實現(xiàn)動態(tài)生日快樂代碼
?生日送什么禮物總是要花一番心思，別出心裁不落俗套，什么禮物才能讓那一個她開心呢？來看看前端大大用html+css實現(xiàn)動態(tài)生日快樂代碼吧，親測可用。2023-01-01
使用純CSS實現(xiàn)未知尺寸的圖片(但高寬都小于200px)在200px的正方形容器中水平和垂直居中2008-05-05