利用CSS同比例縮小圖片并且符合Web標(biāo)準(zhǔn)_DIV+CSS實(shí)例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
當(dāng)然,生成縮略圖這個工作假如交給程序來完成,效果會好很多,但是有時出于某種因素,例如服務(wù)器不支持GD之類的,難免就要請CSS代勞。
把一副大圖片按比例縮小到某個尺寸,對于現(xiàn)代瀏覽器,直接使用max-width和max-height兩條CSS屬性即可。
對于IE 6.0及以下版本,以上兩條CSS屬性均不會被理會。之前處理這種事情,我們往往會借助Javascript,然后為圖片加上onload事件。例如:
這固然能解決問題,但是對以后頁面的升級會帶來麻煩——隨著瀏覽器對CSS支持的完善,我們遲早會把圖片上的onload事件統(tǒng)統(tǒng)去除。該是Expression的Show Time了,既然IE支持通過Expression在CSS中放置一些腳本,而這段腳本又只是提供給IE 6.0及以下版本使用,那么把它寫到Expression中再合適不過。
最終,把一副大圖片按比例縮小到50px*50px以內(nèi),可以參照以下這段CSS:
至于圖片是如何保持其高寬比例的,這張圖片可以解釋:
把一副大圖片按比例縮小到某個尺寸,對于現(xiàn)代瀏覽器,直接使用max-width和max-height兩條CSS屬性即可。
對于IE 6.0及以下版本,以上兩條CSS屬性均不會被理會。之前處理這種事情,我們往往會借助Javascript,然后為圖片加上onload事件。例如:
示例代碼 [m.dounai2.com]
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<script type="text/javascript">
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>
<script type="text/javascript">
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>
這固然能解決問題,但是對以后頁面的升級會帶來麻煩——隨著瀏覽器對CSS支持的完善,我們遲早會把圖片上的onload事件統(tǒng)統(tǒng)去除。該是Expression的Show Time了,既然IE支持通過Expression在CSS中放置一些腳本,而這段腳本又只是提供給IE 6.0及以下版本使用,那么把它寫到Expression中再合適不過。
最終,把一副大圖片按比例縮小到50px*50px以內(nèi),可以參照以下這段CSS:
示例代碼 [m.dounai2.com]
.thumbImage{
max-width:50px;
max-height:50px;
}
*html.thumbImage{
width:expression(this.width>50&&this.width>this.height?50:auto);
height:expresion(this.height>50?50:auto);
}
max-width:50px;
max-height:50px;
}
*html.thumbImage{
width:expression(this.width>50&&this.width>this.height?50:auto);
height:expresion(this.height>50?50:auto);
}
至于圖片是如何保持其高寬比例的,這張圖片可以解釋:
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
猜你也喜歡看這些
- 如何實(shí)現(xiàn)未知高居垂直居中?
- 正確的使用margin:0auto與body{text-align:center;}實(shí)現(xiàn)元素居中
- 三列式網(wǎng)頁布局如何用CSSfloats創(chuàng)建?
- 兩個層之間的為什么會有間隙(IE3pxbug)?
- DIVCSS垂直居中文本實(shí)例代碼
- DivCSS布局?jǐn)U展技巧和用法
- CSS下拉及多級彈出式菜單
- 結(jié)構(gòu)中id與class的使用原則與技巧
- CSSfloats來創(chuàng)建三欄網(wǎng)頁布局的方法
- WEB2.0標(biāo)準(zhǔn)教程:第十二天校驗(yàn)及常見錯誤
- 相關(guān)鏈接:
- 教程說明:
DIV+CSS實(shí)例-利用CSS同比例縮小圖片并且符合Web標(biāo)準(zhǔn)。