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

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/ 的背景图片一样，不管网页显示的内容宽度是多少，永远是自适应全屏，居中显示
...全文
4649 14 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
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>
Android编程实现WebView自适应全屏方法小结
主要介绍了Android编程实现WebView自适应全屏方法,结合实例形式总结了三种常用的WebView自适应全屏实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery网页全屏自适应图片瀑布流布局代码
jQuery自适应图片，网页瀑布流布局，瀑布流图片布局，全屏图片布局。
Swiper全屏自适应焦点图轮播代码
这是一款基于Swiper实现的全屏自适应焦点图轮播代码，点击箭头按钮或拖动图片左右滚动切换到中间展示大图。
jQuery全屏自适应无限加载瀑布流特效.zip
jQuery全屏自适应无限加载瀑布流特效.zip
jQuery满屏自适应焦点滚轮图切换特效
jquery满屏滚轮切换效果，兼容IE6及所有主流浏览器！
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章