图片自动适应大小

来源:互联网 发布:淘宝违规处理考试 编辑:程序博客网 时间:2024/05/01 02:59

方法一[javascript]:

onload="javascript:if(this.width>450)this.style.width=450;"

onload="javascript:if(this.width>450)this.style.width=450;else this.style.width=200"

onload="javascript:if(this.width>450)this.style.width=450;if(this.width<200)this.style.width=200;"


下面的代码将相应鼠标点击事件,以新窗口打开当前图片:

onClick="javascript:window.open(this.href,'','');return false;"

***************************************************************************

方法二[CSS]:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片自动适应大小</title>
<style type="text/css">
<!--
body {
 font-size: 12px;
 text-align: center;
 margin: 0px;
 padding: 100px;
 width:800px
}
#text{
padding:10px;
margin:0px;
float:left;
width:456px;
border:1px dashed #000;
height:203px;
line-height:20px;
}
#fixwidth{
  width:790px;
  border:1px solid #333;
  }
#fixwidth img{
 float:right;
    margin:0px;
    max-width:300px;
 width:expression(document.body.clientWidth > 780?"300px": "auto" );
 border:1px dashed #000;
 }
-->
</style>
</head>
<body>
<h1>图片自动适应大小</h1>

<div id="fixwidth">
<div id="text">
这是图片自动适应大小,试着改动<br />
</div>
<img src="http://news.xinhuanet.com/photo/2006-03/29/xinsrc_02203032921351711407105.jpg">
</div>
</body>
</html>