css+JavaScript如何控制圖片大小的範例程式碼分享-css教學-PHP中文網

css+JavaScript如何控制圖片大小的範例程式碼分享

黄舟

發布： 2017-07-26 13:39:39

原創

1565 人瀏覽過

使用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.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>

登入後複製

以上是css+JavaScript如何控制圖片大小的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！