您的当前位置：首页正文

css+JavaScript如何控制图片大小的示例代码分享

2020-11-27 来源：欧得旅游网

使用js和css讲图片的现实控制在固定的区域内，大于这个区域的等比例缩放，小于这个区域的居中显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css+js完美控制图片大小</title> 
<script type="text/javascript" language="JavaScript"> 
<!-- 
var flag=false; 
function DrawImage(ImgD){ 
 var image=new Image(); 
 image.src=ImgD.src; 
 if(image.width>0 && image.height>0){ 
 flag=true; 
 if(image.width/image.height>= 400/400){ 
 if(image.width>400){ 
 ImgD.width=400; 
 ImgD.height=(image.height*400)/image.width; 
 }else{ 
 ImgD.width=image.width; 
 ImgD.height=image.height; 
 } 
 ImgD.alt=image.width+"x"+image.height; 
 } 
 else{ 
 if(image.height>400){ 
 ImgD.height=400; 
 ImgD.width=(image.width*400)/image.height; 
 }else{ 
 ImgD.width=image.width; 
 ImgD.height=image.height; 
 } 
 ImgD.alt=image.width+"x"+image.height; 
 } 
 } 
} 
//--> 
</script> 
<style type="text/css"> 
<!-- 
* { 
 margin:0; 
 padding:0; 
} 
li { 
 list-style:none; 
} 
img { 
 border:0; 
} 
.group_head { 
width:400px; 
height:400px; 
line-height:400px; 
border:1px solid #ccc; 
overflow:hidden; 
position:relative; 
text-align:center; 
float:left; 
margin-right:10px; 
} 
.group_head p { 
position:static; 
+position:absolute; 
top:50%; 
vertical-align:middle 
} 
.group_head img { 
position:static; 
+position:relative; 
top:-50%;left:-50%; 
vertical-align:middle 
} 
--> 
</style> 
</head> 

<body> 
<ul class="jobGroup"> 
 <li><a href="http://www.gxlcms.com">
 <div class="group_head">
 <p>
 <img width="400" height="400" src="http://www.baidu.com/img/baidu_logo.gif" onload="DrawImage(this);"/>
 </p>
 </div>
 </a> 
 </li> 
 
 </ul> 
</body> 
</html>