Home > Article > Web Front-end > Sample code sharing on how to control image size with css+JavaScript

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

黄舟Original: 2017-07-26 13:39:391565browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example code sharing on how to use CSS to adjust image sizeNext article：Example code sharing on how to use CSS to adjust image size

See more

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

Related articles