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

EiffeDesign 2013-01-31 10:49:33



<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 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()", 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);">

<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>

我用淡入淡出效果做了全屏，但是高度问题一直无法解决，
1、图片永远水平居中
2、图片宽度自动全屏后，能否判断如果图片高度小于网页显示高度，图片高度自动等比例放大到网页显示高度，图片垂直居中显示

图片的全屏效果就像网易轻博客http://www.lofter.com/ 的背景图片一样，不管网页显示的内容宽度是多少，永远是自适应全屏，居中显示

...全文

4567 14 打赏收藏举报

写回复

14 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

fzfei2 2013-02-01

再试试


<!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>

打赏
举报

回复赞

fzfei2 2013-02-01

看下，是不是这效果


<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>

打赏
举报

回复赞

EiffeDesign 2013-02-01

引用 11 楼 wbb123yu 的回复:

引用 10 楼 EiffeDesign 的回复: JavaScript code?1#banner_list img {border:0px; width:100%;min-height: expression(document.documentElement.clientHeight + "px"); margin-left:expression((document.documentEleme……

不行哦，因为我的图片还带了切换效果，不单单只有一张图片!

打赏
举报

回复赞

wbb123yu 2013-02-01

引用 10 楼 EiffeDesign 的回复:

JavaScript code?1#banner_list img {border:0px; width:100%;min-height: expression(document.documentElement.clientHeight + "px"); margin-left:expression((document.documentElement.clientWidt……

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

打赏
举报

回复赞

EiffeDesign 2013-02-01

#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就出错了

打赏
举报

回复赞

EiffeDesign 2013-02-01

引用 8 楼 fzfei2 的回复:

引用 7 楼 EiffeDesign 的回复: fzfei2 你的代码还是不行哦，没有切换效果，图片也没有居中你是什么浏览器，我这测试效果还行

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

打赏
举报

回复赞

fzfei2 2013-02-01

引用 7 楼 EiffeDesign 的回复:

fzfei2 你的代码还是不行哦，没有切换效果，图片也没有居中

你是什么浏览器，我这测试效果还行

打赏
举报

回复赞

EiffeDesign 2013-02-01

引用 4 楼 wbb123yu 的回复:

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

感谢wbb123yu的提示，我在img加了个

min-height: expression(document.documentElement.clientHeight + "px");

现在的效果是不管网页多大多宽，图片都是等比例放大或者缩小的全屏剩下最后一步了，如何让图片永远水平居中和垂直居中

fzfei2 你的代码还是不行哦，没有切换效果，图片也没有居中

打赏
举报

回复赞

fzfei2 2013-02-01

改了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>

打赏
举报

回复赞

fzfei2 2013-02-01

再试试


<!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>

打赏
举报

回复赞

wbb123yu 2013-02-01

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

打赏
举报

回复赞

wbb123yu 2013-02-01

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

打赏
举报

回复赞

EiffeDesign 2013-02-01

引用 1 楼 fzfei2 的回复:

看下，是不是这效果 JavaScript code ? 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384……

测试没效果啊，图片没有水平居中，也无法自动调整高度！！！

打赏
举报

回复赞

EiffeDesign 2013-02-01

引用 13 楼 fzfei2 的回复:

再试试 XML/HTML code ? 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788……

感谢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>