图片等比缩放

js或JQ能处理么？父容器宽高固定， 当图片宽高小于父容器宽高时，等比放大到和父容器宽高一样，当图片宽高大于父容器宽高时，图片等比缩小和父容器宽高一样。 比如 父容器 宽高100*100，如果图片是50*50，那就让图片等比放大到100*100，如果图片是200*200，那就让图片等比缩小到100*100...最终的目的是，让图片自适应填充满父容器宽高，图片也不会变形javascriptjshtmlcssjquery

解决方案 »

  1.   

    这不就是把img的height和width设置成100%么……
      

  2.   

    你理解错了，设置成height="100%"意思是高度是容器高度的100%，而不是图片尺寸的100%
    你的HTML和CSS好像不太熟悉啊
    建议你亲自试一试再来否定……
      

  3.   

    http://v5blog.lofter.com/post/80054_c3791
    http://v5blog.lofter.com/post/80054_c3771
      

  4.   

    首先不能设置图片的宽与高都100%.否则虽然适应了DIV，但是永远与DIV一样宽高了，也就是变形了。
    但也不能简单设置宽或者高为100%，还得分情况。最好的办法用js统计应该设置宽还是高为100%。
      

  5.   

    我写了一个，你试下。<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script  type="text/javascript" language="javascript"> 
    window.onload=function(){
    changeImgSize();
    }
    function changeImgSize(){
    var getContainer=document.getElementById('imgcontainer');
    var getIMG=getContainer.getElementsByTagName('img')[0];
    var fw=getContainer.offsetWidth-(2*getContainer.clientLeft);
    var fh=getContainer.offsetHeight-(2*getContainer.clientTop);
    var iw=getIMG.width; 
    var ih=getIMG.height;
    var m=iw/fw;
    var n=ih/fh;
    if(m>=1&&n<=1)
    {
    iw=Math.ceil(iw/m);
    ih=Math.ceil(ih/m);
    getIMG.width=iw;
    getIMG.height=ih;
    }
    else if(m<=1&&n>=1)
    {
    iw=Math.ceil(iw/n);
    ih=Math.ceil(ih/n);
    getIMG.width=iw;
    getIMG.height=ih;
    }
    else if(m>=1&&n>=1)
    {
    getMAX=Math.max(m,n);
    iw=Math.ceil(iw/getMAX);
    ih=Math.ceil(ih/getMAX);
    getIMG.width=iw;
    getIMG.height=ih;
    }
    if(getIMG.height<fh)
    {
    var getDistance=Math.floor((fh-getIMG.height)/2);
    getIMG.style.marginTop=getDistance.toString()+"px";
    }
    }
    </script>
    <style>
    .sy_pic{ width:200px; height:300px; border:#000 solid 5px; text-align:center; display:table-cell; vertical-align:central; display:block;}
    .sypic img{}
    </style>
    </head><body>
    <div class="sy_pic" id="imgcontainer"><img src="images/444.jpg" /></div>
    </body>
    </html>
      

  6.   


    var w = img.width;
    var h = img.height;
    /*当图片宽高超过窗口宽高，则等比例缩小*/
    if(options.FixedImg)
    {
    if(w>h&&w>$(window).width())
    {
    var neww=$(window).width();
    h=h*neww/w;
    w=neww;
    }
    if(h>w&&h>$(window).height())
    {
    var newh=$(window).height();
    w=w*newh/h;
    h=newh;
    }
    }
    img.style.width = w + "px";
    img.style.height = h + "px";我想对的是当前窗口，如果是容器，你可以相应替换掉
      

  7.   

    我仔细看了好几遍，还是觉得这就是一个很简单的问题啊，难道我的理解能力越来越差了……
    <div style="height:100px;width:100px;"><img src="xx.jpg" height="100%" width="100%" /></div>
    这完全符合你的要求啊
      

  8.   

    我仔细看了好几遍，还是觉得这就是一个很简单的问题啊，难道我的理解能力越来越差了……
    <div style="height:100px;width:100px;"><img src="xx.jpg" height="100%" width="100%" /></div>
    这完全符合你的要求啊你找个图片200*800，div宽高：800*200，你100%试试
      

  9.   

    我仔细看了好几遍，还是觉得这就是一个很简单的问题啊，难道我的理解能力越来越差了……
    <div style="height:100px;width:100px;"><img src="xx.jpg" height="100%" width="100%" /></div>
    这完全符合你的要求啊你找个图片200*800，div宽高：800*200，你100%试试
    哦，明白了，我这样做的话，图片变形了，但并不会撑破容器的。
    很多做法是让width为100%，把容器设置成overflow:hidden，这样虽然可能只显示一部分图片，但图片总是充满容器并且不变形。
      

  10.   

    网上好多方法的。<html>
    <head>
    <title>固定容器内等比例缩放图片</title><style type="text/css">
    <!--
    li{
    display: table-cell;list-style:none;border:#333 solid1px;width:230;height:210px;padding:0px;margin:5px;text-align:center; vertical-align:middle;
    }
    -->
    </style><script language="JavaScript">
    <!--
    //图片按比例缩放
    var flag=false;
    function DrawImage(ImgD){
    var image=new Image();
    var iwidth = 220;            //定义允许图片宽度，当宽度大于这个值时等比例缩小
    var iheight = 200;            //定义允许图片高度，当宽度大于这个值时等比例缩小
    image.src=ImgD.src;
    if(image.width>0 && image.height>0){         //假如图片长宽都不为零
    flag=true;
         if(image.height/image.width>= iheight/iwidth){       //通过正弦值判断图片缩放后是否偏高
          if(image.height>iheight){        //如果图片比设定的要高
           ImgD.height=iheight;
           ImgD.width=(image.width*iheight)/image.height;
          }else{
           ImgD.width=image.width;
           ImgD.height=image.height;
          }     ImgD.alt=image.width+"×"+image.height;
         }     else{           //如果图片比例 小于 设定的比例
          if(image.width>iwidth){
           ImgD.width=iwidth;
           ImgD.height=(image.height*iwidth)/image.width;
          }else{
           ImgD.width=image.width;
           ImgD.height=image.height;
          }
         ImgD.alt=image.width+"×"+image.height;
         }
    }
    }
    //调用：<img src="图片" onload="javascript:DrawImage(this)">
    //-->
    </script></head>
    <body>
    <li><img src="1.jpg" onload="javascript:DrawImage(this)"></li>
    <li><img src="2.jpg" onload="javascript:DrawImage(this)"></li>
    <li>文字测试也不少</li>
    </body>
    </html>