图片如何实现判断高度调整自适应全屏

本帖最后由 EiffeDesign 于 2013-01-31 22:59:19 编辑

解决方案 »

  1.   

    看下，是不是这效果<style type="text/css">
    #banner {position:relative; height:100%; overflow:hidden; }
    #banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
    margin:0; padding:0; bottom:10%; left:50%;}
    #banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;background:#6f4f67;cursor:pointer}
    #banner ul li.on { background:#900}#banner_list img {border:0px; width:100%;}
    #banner_list a{position:absolute;}
     </style>        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    var t = n = 0, count;
    $(document).ready(function(){
    count=$("#banner_list a").length;
    var bw=$('body').width(),bh=$('body').height();
    $('#banner_list img').each(function(i){this.index=i})
    $('#banner_list img').load(function(){
          resizeImg(this);
          var p=$(this).parent();
      if(p.index())p.hide();
    });
    function resizeImg(img){
      var img=$(img),w=img.width(),h=img.height(),aw,ah;
          if(bh<h){
        w=parseInt(bh/h*w);
        h=bh;
      }else if(bw<w){
        h=parseInt(bw/w*h);
        w=bw;
      }else{
        if(w>h){
           h=parseInt(bw/w*h);
           w=bw;
        }else{
           w=parseInt(bh/h*w);
           h=bh;
        }
      }
      img.css({
        width:w,
        height:h
      });
      img.parent().css({
         left: (bw-w)>>1,
         top: (bh-h)>>1 
      });
    }
     
    $("#banner li").click(function() {
    var i = $(this).text() - 1;
    n = i;
    if (i >= count) return;
    $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
    //document.getElementById("banner").style.background="";
    $(this).toggleClass("on");
    $(this).siblings().removeAttr("class");
    });
    //t = setInterval("showAuto()", 3000);
    // $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
    })

    // function showAuto()
    // {
    // n = n >=(count - 1) ? 0 : ++n;
    // $("#banner li").eq(n).trigger('click');
    // }
    </script>
    </head><body scrollbars="no" scroll="no">
    <div style="position:absolute; top:0; left:0; width:100%; height:100%; background:url(imgs/fullbody.png) #aaa;">
    <div id="banner">
        <ul>
            <li class="on">1</li>
            <li>2</li>
        </ul>
       <div id="banner_list">
            <a><img src="http://img.hb.aicdn.com/707cb9414334425845c2768b97e1766889ce5a1129c88-LRF7jf_fw554" /></a>
            <a><img src="http://imgsrc.baidu.com/forum/pic/item/aefd5266d016092443074862d40735fae6cd34ad.jpg" /></a>
    </div>
    </div>
    </div>
    </body>
    </html>
      

  2.   

    .selecter {
        position: fixed;
        height: 100%;
        width: 图片宽度
        top: 0;
        left:50%;
        margin-left: 50%图片宽度  
    }
      

  3.   

    为了防止图片变性严重最好加个min-height
      

  4.   

    再试试<!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    html,body{width:100%;height:100%}
    #banner {position:relative; height:100%; overflow:hidden; }
    #banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
    margin:0; padding:0; bottom:10%; left:50%;}
    #banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;background:#6f4f67;cursor:pointer}
    #banner ul li.on { background:#900}#banner_list img {border:0px; width:100%;}
    #banner_list a{position:absolute;}
     </style>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    var t = n = 0, count;
    $(document).ready(function(){
    count=$("#banner_list a").length;
    var bw=$('body').width(),bh=$('body').height();
    //console.info( [bw,bh] );
    $('#banner_list img').load(function(){
          resizeImg(this);
          var p=$(this).parent();
          if(p.index())p.hide();
    });
    $('#banner_list img').each(resizeImg);
    function resizeImg(img){
      if(!img.offsetWidth  ) return;
      var img=$(img),w=img.width(),h=img.height(),aw,ah;
          if(bh<h){
        w=parseInt(bh/h*w);
        h=bh;
      }else if(bw<w){
        h=parseInt(bw/w*h);
        w=bw;
      }else{
        if(w>h){
           h=parseInt(bw/w*h);
           w=bw;
        }else{
           w=parseInt(bh/h*w);
           h=bh;
        }
      }
      img.css({
        width:w,
        height:h
      });
      img.parent().css({
         left: (bw-w)>>1,
         top: (bh-h)>>1 
      });
    }
     
    $("#banner li").click(function() {
    var i = $(this).text() - 1;
    n = i;
    if (i >= count) return;
    $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
    //document.getElementById("banner").style.background="";
    $(this).toggleClass("on");
    $(this).siblings().removeAttr("class");
    });
    //t = setInterval("showAuto()", 3000);
    // $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
    })

    // function showAuto()
    // {
    // n = n >=(count - 1) ? 0 : ++n;
    // $("#banner li").eq(n).trigger('click');
    // }
    </script>
    </head><body scrollbars="no" scroll="no">
    <div style="position:absolute; top:0; left:0; width:100%; height:100%; background:url(imgs/fullbody.png) #aaa;">
    <div id="banner">
        <ul>
            <li class="on">1</li>
            <li>2</li>
        </ul>
       <div id="banner_list">
            <a><img src="http://img.hb.aicdn.com/707cb9414334425845c2768b97e1766889ce5a1129c88-LRF7jf_fw554" /></a>
            <a><img src="http://imgsrc.baidu.com/forum/pic/item/aefd5266d016092443074862d40735fae6cd34ad.jpg" /></a>
    </div>
    </div>
    </div>
    </body>
    </html>
      

  5.   

    改了IE下缓存BUG<!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    html,body{width:100%;height:100%}
    #banner {position:relative; height:100%; overflow:hidden; }
    #banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
    margin:0; padding:0; bottom:10%; left:50%;}
    #banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;background:#6f4f67;cursor:pointer}
    #banner ul li.on { background:#900}#banner_list img {border:0px; width:100%;}
    #banner_list a{position:absolute;}
     </style>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    var t = n = 0, count;
    $(document).ready(function(){
    count=$("#banner_list a").length;
    var bw=$('body').width(),bh=$('body').height();
    $('#banner_list img').load(function(){
          resizeImg(this);
          var p=$(this).parent();
          if(p.index())p.hide();
    });
    $('#banner_list img').each(function(i){
      resizeImg(this);
      if(this.offsetWidth && i)$(this).parent().hide();
    });
    function resizeImg(img){
      if(!img.offsetWidth  ) return;
      var img=$(img),w=img.width(),h=img.height();
      console.log( [w,h]  );
          if(bh<h){
        w=parseInt(bh/h*w);
        h=bh;
      }else if(bw<w){
        h=parseInt(bw/w*h);
        w=bw;
      }else{
        if(w>h){
           h=parseInt(bw/w*h);
           w=bw;
        }else{
           w=parseInt(bh/h*w);
           h=bh;
        }
      }
      img.css({
        width:w,
        height:h
      });
      img.parent().css({
         left: (bw-w)>>1,
         top: (bh-h)>>1 
      });
    }
     
    $("#banner li").click(function() {
    var i = $(this).text()-1;
    n = i;
    if (i >= count) return;
    $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
    //document.getElementById("banner").style.background="";
    $(this).toggleClass("on");
    $(this).siblings().removeAttr("class");
    });
    //t = setInterval("showAuto()", 3000);
    // $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
    })

    // function showAuto()
    // {
    // n = n >=(count - 1) ? 0 : ++n;
    // $("#banner li").eq(n).trigger('click');
    // }
    </script>
    </head><body scrollbars="no" scroll="no">
    <div style="position:absolute; top:0; left:0; width:100%; height:100%; background:url(imgs/fullbody.png) #aaa;">
    <div id="banner">
        <ul>
            <li class="on">1</li>
            <li>2</li>
        </ul>
       <div id="banner_list">
            <a><img src="http://img.hb.aicdn.com/707cb9414334425845c2768b97e1766889ce5a1129c88-LRF7jf_fw554" /></a>
            <a><img src="http://imgsrc.baidu.com/forum/pic/item/aefd5266d016092443074862d40735fae6cd34ad.jpg" /></a>
    </div>
    </div>
    </div>
    </body>
    </html>
      

  6.   


    感谢wbb123yu的提示，我在img加了个
    min-height: expression(document.documentElement.clientHeight + "px");现在的效果是不管网页多大多宽，图片都是等比例放大或者缩小的全屏
    剩下最后一步了，如何让图片永远水平居中和垂直居中fzfei2 你的代码还是不行哦，没有切换效果，图片也没有居中
      

  7.   


    我测试ie8, the world,都不行，不知道哪里问题
      

  8.   

    #banner_list img {border:0px; width:100%;min-height: expression(document.documentElement.clientHeight + "px"); margin-left:expression((document.documentElement.clientWidth-this.Width)/2 + "px"); margin-top:expression((document.documentElement.clientHeight-this.Height)/2 + "px"); }这个方法好像可以计算位置固定，但是要如何获取图片的高度和宽度？？？ 我用了this.clientWidth就出错了
      

  9.   


    你的图片规格是随机的?  那只有用js了  var img = new image();
    img.src = "xxx/xxx";
    img.onload = function () {计算设置margin什么的让他居中}水平居中直接{ display:block;margin: 0 auto;}就好  垂直就用上面的JS计算吧
      

  10.   

    再试试<!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    html,body{width:100%;height:100%}
    #banner {position:relative; height:100%; overflow:hidden; }
    #banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
                margin:0; padding:0; bottom:10%; left:50%;}
    #banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;background:#6f4f67;cursor:pointer}
    #banner ul li.on { background:#900}
     
    #banner_list img {border:0px; width:100%;}
    #banner_list a{position:absolute;}
     </style>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        var t = n = 0, count;
        $(document).ready(function(){
            count=$("#banner_list a").length;
            var bw=$('body').width(),bh=$('body').height();
            $('#banner_list img').load(function(){
          resizeImg(this);
          var p=$(this).parent();
          if(p.index())p.hide();
            });
            $('#banner_list img').each(function(i){
              resizeImg(this);
              if(this.offsetWidth && i)$(this).parent().hide();
            });
            function resizeImg(img){
              if(!img.offsetWidth  ) return;
              var img=$(img),w=img.width(),h=img.height();
          if(bh<h){
                w=parseInt(bh/h*w);
                h=bh;
              }else if(bw<w){
                h=parseInt(bw/w*h);
                w=bw;
              }else{
                if(w>h){
                  h=parseInt(bw/w*h);
                  w=bw;
                }else{
                  w=parseInt(bh/h*w);
                  h=bh;
                }
              }
              img.css({
                width:w,
                height:h
              });
              img.parent().css({
                 left: (bw-w)>>1,
                 top: (bh-h)>>1 
              });
            }
      
            $("#banner li").click(function() {
                var i = $(this).text()-1;
                n = i;
                if (i >= count) return;
                $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
                //document.getElementById("banner").style.background="";
                $(this).toggleClass("on");
                $(this).siblings().removeAttr("class");
            });
            //t = setInterval("showAuto()", 3000);
            // $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
        })
         
    //    function showAuto()
    //    {
    //        n = n >=(count - 1) ? 0 : ++n;
    //        $("#banner li").eq(n).trigger('click');
    //    }
    </script>
    </head>
     
    <body scrollbars="no" scroll="no">
    <div style="position:absolute; top:0; left:0; width:100%; height:100%; background:url(imgs/fullbody.png) #aaa;">
    <div id="banner">    
        <ul>
            <li class="on">1</li>
            <li>2</li>
        </ul>
       <div id="banner_list">
            <a><img src="http://img.hb.aicdn.com/707cb9414334425845c2768b97e1766889ce5a1129c88-LRF7jf_fw554" /></a>
            <a><img src="http://imgsrc.baidu.com/forum/pic/item/aefd5266d016092443074862d40735fae6cd34ad.jpg" /></a>
        </div>
    </div>
    </div>
    </body>
    </html>
      

  11.   


    感谢fzfei2的调试，还是不可以，我重新贴一遍我改过的代码，全屏图片切换已经可以实现了，就是怎么设置图片高度宽度永远居中问题！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.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=gb2312" />
    <style type="text/css">
    #banner {position:relative; height:100%; overflow:hidden; }
    #banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
    margin:0; padding:0; bottom:10%; left:50%;}
    #banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;background:#6f4f67;cursor:pointer}
    #banner ul li.on { background:#999}#banner_list img {border:0px; width:100%; height:100%; min-height: expression(document.documentElement.clientHeight + "px");}
    #banner_list a{position:absolute;}
    </style><script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
    <script type="text/javascript">
    var t = n = 0, count;
    $(document).ready(function(){
    count=$("#banner_list a").length;
    $("#banner_list a:not(:first-child)").hide();
    $("#banner li").click(function() {
    var i = $(this).text() - 1;
    n = i;
    if (i >= count) return;
    $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
    document.getElementById("banner").style.background="";
    $(this).toggleClass("on");
    $(this).siblings().removeAttr("class");
    });
    t = setInterval("showAuto()", 30000);
    $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 30000);});
    })

    function showAuto()
    {
    n = n >=(count - 1) ? 0 : ++n;
    $("#banner li").eq(n).trigger('click');
    }
    </script>
    </head><body scrollbars="no" scroll="no" onresize="myLoad()" onload="myLoad()" style="margin:0 auto">
    <div style="position:absolute; top:0; left:0; width:100%; height:100%; background:url(imgs/fullbody.png);">
    <div id="banner">
        <ul>
            <li class="on">1</li>
            <li>2</li>
        </ul>
       <div id="banner_list">
            <a><img src="imgs/main-1.jpg" /></a>
            <a><img src="imgs/main-2.jpg"/></a>
    </div>
    </div>
    </div></body>
    </html>