css+JavaScript如何控制图片大小的示例代码分享-css教程-PHP中文网

首页

web前端

css教程

css+JavaScript如何控制图片大小的示例代码分享

Jul 26, 2017 pm 01:39 PM

css

使用js和css讲图片的现实控制在固定的区域内，大于这个区域的等比例缩放，小于这个区域的居中显示。

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt; 
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 
&lt;head&gt; 
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt; 
&lt;title&gt;css+js完美控制图片大小&lt;/title&gt; 
&lt;script type=&quot;text/javascript&quot; language=&quot;JavaScript&quot;&gt; 
&lt;!-- 
var flag=false; 
function DrawImage(ImgD){ 
    var image=new Image(); 
    image.src=ImgD.src; 
    if(image.width&gt;0 &amp;&amp; image.height&gt;0){ 
        flag=true; 
        if(image.width/image.height&gt;= 400/400){ 
            if(image.width&gt;400){ 
                ImgD.width=400; 
                ImgD.height=(image.height*400)/image.width; 
            }else{ 
                ImgD.width=image.width; 
                ImgD.height=image.height; 
            } 
            ImgD.alt=image.width+&quot;x&quot;+image.height; 
        } 
        else{ 
            if(image.height&gt;400){ 
                ImgD.height=400; 
                ImgD.width=(image.width*400)/image.height; 
            }else{ 
                ImgD.width=image.width; 
                ImgD.height=image.height; 
            } 
            ImgD.alt=image.width+&quot;x&quot;+image.height; 
        } 
    } 
} 
//--&gt; 
&lt;/script&gt; 
&lt;style type=&quot;text/css&quot;&gt; 
&lt;!-- 
* { 
    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 
} 
--&gt; 
&lt;/style&gt; 
&lt;/head&gt; 

&lt;body&gt; 
&lt;ul class=&quot;jobGroup&quot;&gt; 
    &lt;li&gt;&lt;a href=&quot;http://www.jb51.net&quot;&gt;
    &lt;div class=&quot;group_head&quot;&gt;
    &lt;p&gt;
    &lt;img width=&quot;400&quot; height=&quot;400&quot; src=&quot;http://www.baidu.com/img/baidu_logo.gif&quot; onload=&quot;DrawImage(this);&quot;/&gt;
    &lt;/p&gt;
    &lt;/div&gt;
    &lt;/a&gt; 
         &lt;/li&gt; 
          
     &lt;/ul&gt; 
&lt;/body&gt; 
&lt;/html&gt;

登录后复制

以上是css+JavaScript如何控制图片大小的示例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn