比如有的图片高比宽大,有的图片宽比高大,在页面上怎么处理让图片都能正常显示而不变形的呢

解决方案 »

  1.   

    在做网站的开发中经常碰到页面图片显示问题,出现图片上传后图片变形或模糊的情况,会使其页面显得很不友好和美观。自己感觉原因有几个:
     
    1。图片在上传中改变了图片的质量而直接导致上传到服务器上的图片已经是模糊的了
    2。可能是页面的图像显示域的比例和实际的图片比例不一致而导致,这样的解决办法就是:根据自己实际需要固定显示域的长或者宽其中之一,只能固定一个的大小,另一个会自动根据比例伸缩。
    3。以上的你都排除了,还出现模糊变形的话,那就可能是你上传的图片实际长(或宽)小于了页面图片显示域中你固定(或宽)。这个的解决办法:写一个javascript动态改变显示域的大小。如下:
    <SCRIPT language=JavaScript>
        <!-- 
        function picwidth(){
           var im =   new   Image(); //生成一个图形对象
           if(document.all.picshows==null)return;//picshows是显示图片image标签的名字 不存在则返回
           im.src = document.all.picshows.src;
           var  w = im.width;//获得实际图片的宽
           var  s = im.height;//获得实际图片的高
           if(w<document.all.picshows.width){
           document.all.picshows.width=w;//当实际图片的宽小于显示定的宽时 改变显示域的宽
           }        
        }
    picwidth();
        //-->
      </SCRIPT>
    上边是固定了宽的情况,当然你也可以用于高的情况。
    4。以上的情况都正常,但还是模糊,那就把页面中的图片另存为看看是否在浏览器中显示的问题。有的浏览器显示个别图片时也会出现变形现象的。
    我的博客:http://fulong258.blog.163.com/blog/static/178950442007630352550/
      

  2.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link rel="stylesheet" href="11.css" type="text/css" />
    <style type="text/css">
    .aaa
    {
    width:160px;
    height:200px;
    }
    </style>
    </head>
    <body>
    <div class="aaa">
           <img src="a.jpg" />   
    </div> 
    </body>
    </html>
      

  3.   

    取得图片大小,按长宽比例计算出缩放后的大小,设置图片的width, height属性