关于图片自适应浏览器窗口大小

本帖最后由 hanrui927 于 2010-11-17 12:56:06 编辑

解决方案 »

  1.   

    你的效果已经搞定了
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    *{margin:0;padding:0;}
    #fontzoom{width:100%;overflow:hidden;}
    </style>
    <script>
    function $(id)
    {
    return document.getElementById(id);
    }
    function autoResizepic()
    {
    var bodywidth = $('fontzoom').style.width;
     bodywidth =document.body.scrollWidth
    var picTarget=$('fontzoom').getElementsByTagName('img');

    if(picTarget.length>0)
    {
    for(var i =0;i<picTarget.length;i++)
    { 
    if(picTarget[i].width>bodywidth)
    {picTarget[i].width=bodywidth-50;}
    if(picTarget[i].width<bodywidth)
    {picTarget[i].width=bodywidth-50;}
    }
    }
    }
    window.onresize=autoResizepic;
    </script>
    </head><body>
    <div id="fontzoom">
    <img src="http://read.91move.com/pics/nuojiya/6630/200607/02/0114370.jpg" />
    <img src="http://read.91move.com/pics/nuojiya/6630/200607/02/0114370.jpg" />
    </div><script>
    autoResizepic();
    </script>
    </body>
    </html>
      

  2.   

    window.onload=function()
    {
    var img = new Image();
    img.onload=function(){imgWidth=this.width;};
    img.src="你的图片路径";
     document.getElementById("main_img").src ="你的图片路径";
    setImgWidth(); 
        window.onresize = setImgWidth;
    };function setImgWidth(){
    var bodywidth = document.body.offsetWidth;
    if (imgWidth > bodywidth-50) {
           document.getElementById("main_img").style.width =bodywidth -50 + "px";
        }else{
    document.getElementById("main_img").style.width = imgWidth + "px";
    }
    }
      

  3.   


    你好，非常感谢你的回答。
    但经过测试。如果图片小于窗口的话，图片还是会被放大，这样的话图片就失真了请把测试图片换成小一点的试试。。
    我想要的是  图片超出body的时候才被缩小，而如果本身已经小于则显示自身尺寸。。
    如果能够继续改进的话就好了，如果不能的话也非常感谢！
      

  4.   

    2楼的朋友你好，我的图片路径是从带参的URL传递过来的。。
    刚才测试还是没有成功
      

  5.   

    如果是一张图片的话到还好！如果是太多的话这种方法 是不行的！所有的图片都会跟着变化。所以我希望你确定一下你的窗口大小或div宽度。如果超过你规定的宽度就自动按比例缩小才好！
    给个我写的自动变化的js给你看吧  
    507是自动最大图片。如果超过507就会变成507。。你自定义好了；
    fontzoom是包含图片的div id.<script>
    function autoResizepic()
        {
        var picTarget=document.getElementById("fontzoom").getElementsByTagName('img');
        //alert(picTarget.length);
        if(picTarget.length>0)
        {
        //alert(picTarget.length);
        for(var i =0;i<picTarget.length;i++)
        { 
        
        if(picTarget[i].width>507)
        {picTarget[i].height=picTarget[i].height*507/picTarget[i].width;picTarget[i].width=507;}
        if(parseInt(picTarget[i].style.width)>507)
        {picTarget[i].style.height=parseInt(picTarget[i].style.height)*507/parseInt(picTarget[i].style.width);picTarget[i].style.width=507+"px";}
        }
        }
        }
    </script>
      

  6.   


    嗯。只有一张图片。
    就是因为窗口大小和DIV宽度无法确定。。所以才一直没有找到合适的代码。。
    与这个类似的代码我之前也测试过。。只能设置为超过某个固定值，然后缩小到指定尺寸。。
    我想根据浏览器的大小来缩放。。类似百度图片http://image.baidu.com/i?ct=503316480&z=9&tn=baiduimagedetail&word=%B1%DA%D6%BD&in=31478&cl=2&lm=-1&pn=1&rn=1&di=35190126555&ln=1&fr=&fmq=&ic=0&s=0&se=&sme=1&tab=&width=&height=&face=0&fb=1
    再次感谢您的回答！