js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > css样式

css等比例缩放图片展示特效

发布时间:2015-09-10 08:12:22    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

css等比例缩放图片展示特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
	<html xmlns="http://www.w3.org/1999/xhtml">    
	<title>css等比例缩放图片展示特效</title>    
	<head>    
		<style type="text/css">    
			body {    
				text-align: center;    
				margin: 20px auto;    
				padding: 0px;    
				font-size:14px;    
				color:red    
			}    
			#pic{    
				margin:5px auto;    
				width:500px;    
				padding:0;    
				border:1px solid #333;    
			}    
			#pic img{    
				max-width:200px;    
				width:expression(document.body.clientWidth > 200?"200px":"auto" );    
				display:block;    
				border:0    
			}    
		</style>    
	</head>    
	<body>    
		将宽度强制为200px后图片高度被等比例缩小    
		<div id="pic">    
			<a href="#"><img src="well.jpg" /></a>    
		</div>    
		原图:<br />    
		<img src="well.jpg" />		    
	</body>    
</html>	



比例缩放图片

css等比例缩放图片展示特效

js实现按比例缩放图片特效代码

js+CSS给图片添加阴影,并且等比例缩放图片