最近想在的分类页面的缩略图让其自动适应,在网上搜索了一些代码,贴出来供大家参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
* {
margin: 0px;
padding: 0px
}
#photo {
margin:0 auto;
padding:0
}
#photo img {
max-width:300px;
min-width:300px;
min-height:200px;
height:200px;
width:expression(document.body.clientWidth>document.getElementById ("photo").scrollWidth*9/10? "300px": "auto")
} </style>
</head>
<body>
<div id="photo"> <img src="http://www.cnwebshow.com/skin/show/images/hodong.gif" /> </div> </body> </html>
还有一个:
<html>
<head>
<title>img max-width</title> <style type="text/css">
<!–
body {
text-align: center; margin: 50px; }
img {
max-width: 200px;
max-height: 200px;
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"} });
} –>
</style>
</head>
<body>
<a href="http://www.cnwebshow.com/"><img src=http://www.cnwebshow.com/logo.gif border="0" /></a><br> <br>
<a href="http://www.cnwebshow.com/"><img src="http://www.cnwebshow.com/skin/show/images/hodong.gif" border="0" /></a> </body> </html>
这两个不错啦。