CSS+JavaScript를 사용하여 이미지 크기를 제어하는 방법에 대한 샘플 코드 공유-CSS 튜토리얼-php.cn

CSS+JavaScript를 사용하여 이미지 크기를 제어하는 방법에 대한 샘플 코드 공유

黄舟

풀어 주다： 2017-07-26 13:39:39

원래의

1592명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!