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

來源:互聯網
上載者:User
使用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>


相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.