Sample code sharing on how to control image size with css+JavaScript-CSS Tutorial-php.cn

Sample code sharing on how to control image size with css+JavaScript

黄舟

Release： 2017-07-26 13:39:39

Original

1568 people have browsed it

Use js and css to control the reality of the image within a fixed area. If it is larger than this area, it will be scaled proportionally, and if it is smaller than this area, it will be displayed in the center.

<!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.jb51.net">
    <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>

Copy after login

The above is the detailed content of Sample code sharing on how to control image size with css+JavaScript. For more information, please follow other related articles on the PHP Chinese website!