最新更新 sitemap 网站制作设计本站搜索
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442
当前位置:首页 > 网页JS特效 > 图形图象类

JS特效关于图片自适应的一些技巧

日期:10-15    来源:中国设计秀    作者:cnwebshow.com

最近想在的分类页面的缩略图让其自动适应,在网上搜索了一些代码,贴出来供大家参考。isE中国设计秀

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> isE中国设计秀

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> isE中国设计秀

<style> isE中国设计秀

* { isE中国设计秀

margin: 0px; isE中国设计秀

padding: 0px isE中国设计秀

} isE中国设计秀

#photo { isE中国设计秀

margin:0 auto; isE中国设计秀

padding:0 isE中国设计秀

} isE中国设计秀

#photo img { isE中国设计秀

max-width:300px; isE中国设计秀

min-width:300px; isE中国设计秀

min-height:200px; isE中国设计秀

height:200px; isE中国设计秀

width:expression(document.body.clientWidth>document.getElementById ("photo").scrollWidth*9/10? "300px": "auto") isE中国设计秀

} </style> isE中国设计秀

</head> isE中国设计秀

<body> isE中国设计秀

<div id="photo"> <img src="http://www.cnwebshow.com/skin/show/images/hodong.gif" /> </div> </body> </html>isE中国设计秀

 isE中国设计秀

还有一个:isE中国设计秀

<html> isE中国设计秀

<head> isE中国设计秀

<title>img max-width</title> <style type="text/css"> isE中国设计秀

<!– isE中国设计秀

body { isE中国设计秀

text-align: center; margin: 50px; } isE中国设计秀

img { isE中国设计秀

max-width: 200px; isE中国设计秀

max-height: 200px; isE中国设计秀

width:expression(onload=function(){if (this.offsetWidth>this.offsetHeight){ this.style.width=(this.offsetWidth > 200)?"200px":"auto" } {this.style.height=(this.offsetHeight < 200)?"auto":"200px"} });isE中国设计秀

} –> isE中国设计秀

</style> isE中国设计秀

</head> isE中国设计秀

<body> isE中国设计秀

<a href="http://www.cnwebshow.com/"><img src=http://www.cnwebshow.com/logo.gif border="0" /></a><br> <br> isE中国设计秀

<a href="http://www.cnwebshow.com/"><img src="http://www.cnwebshow.com/skin/show/images/hodong.gif" border="0" /></a> </body> </html>isE中国设计秀

这两个不错啦。isE中国设计秀

本文引用地址:/js/article_46868.html
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明