html通过htc改变图片大小-CSDN博客

本文介绍如何通过创建HTC文件实现图片自动缩放功能，确保图片宽度超过500像素时自动调整为90%显示，并提供了一个具体的HTML示例页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建htc文件，命名为img.htc，代码如下：

<public:component>
<public:attach event="onload" onevent="doload()" />
<public:attach event="onmouseover" onevent="domouseover()"/>
<public:attach event="onclick" onevent="doclick()"/>
<script language="javascript">
function doload(){  
if(this.width>500)this.style.width="90%";
}
function domouseover(){  
}
function doclick(){
 }
</script>
</public:component>

当图片大于500时自动缩放为90%，在html中调用代码如下：

<html>
<head>
<style type="text/css">
<!--
body {
	font-size: 12px;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
#pic{
  margin:0 auto;
  width:500px;
  padding:0;
  border:1px solid #333;
  }
img{
	max-width:90%;
	behavior:url(img.htc);
	overflow:hidden;
	}
-->
</style>
</head>
<body>
<div id="pic">
<img src="http://www.blueidea.com/img/common/logo.gif" alt="感谢blueidea被我盗链图片！"/>
<br>
<br>
<img src="http://www.blueidea.com/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片！"/>
</div>
</body>
</html>