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給圖片添加陰影,并且等比例縮放圖片

河南快三开奖纟结果 天天乐棋牌游戏? 366娱乐城网上百家乐 上海麻将下载 今天3d开机号和试机号列表开奖 时时乐西餐厅官网 深圳风采app 20选5走势图 正规配资 深圳风采2011035期 二维码推广赌博游戏犯法吗