web界面图片自适应解决方案

最新推荐文章于 2024-05-15 09:36:56 发布

策码奔腾的小单

最新推荐文章于 2024-05-15 09:36:56 发布

阅读量2.8k

点赞数

分类专栏： web前端文章标签： web前端 bootstrap 界面图片背景图片自适应窗口

本文链接：https://blog.csdn.net/shansusu/article/details/41644919

版权

web前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

更多2019年的技术文章，欢迎关注我的微信公众号：码不停蹄的小鼠松（微信号：busy_squirrel），也可扫下方二维码关注获取最新文章哦~

做前端页面时，图片自适应问题总是很头疼，这里首先说明一下碰到的问题：在前期做项目中的过程中，刚开始并没有考虑到浏览器的版本兼容性问题，默认的用chrome开发，于是对于登陆页面的背景图片，用了如下写法：

<div id="Layer1" style="position: absolute; width: 100%; height: 100%; z-index: -1">
		<img src="/EVM/img/sac_login_backgroundImg.jpg" height="100%"
			width="100%" />
	</div>

在chrome中的效果还可以：

但是在IE8中的显示效果就不怎么好了：

网上有人给出了CSS + JS的方式，点击这里查看原网址。下面给出示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>窗口背景变化</title>
<style type="text/css">  
*{margin:0;padding:0;}
#bg{
position:absolute;
top:0px;
left:0px;
z-index:-999;
}
</style>
</head>
<body>
<div id="bg"><img src=" http://www.wallcoo.com/ad/Korea_Besti_Belli/images/jihyun-bestibelli06.jpg" alt="HIGH"></div>
<input type="text" id="msg" name="msg" size="50"/>
<script type="text/javascript">
 window.onresize = window.onload = function(){
     var w,h
     if(!!(window.attachEvent && !window.opera))
     {
      h = document.documentElement.clientHeight;
      w = document.documentElement.clientWidth;
     }else{
      h = window.innerHeight;
      w = window.innerWidth;
     }
  document.getElementById('msg').value  ='窗口大小：' + 'width:' + w + '; height:'+h;
    var bgImg = document.getElementById('bg').getElementsByTagName('img')[0];
    bgImg.width = (w - 5);
    bgImg.height= (h-5) ;  
          
   }   
</script>
</body>
</html>

这种方法可以很好的解决图形的自适应问题，但是若加入JQuery的东西，对于IE8还是没有效果。暂时还没有测试IE9和IE10的兼容性。

更多2019年的技术文章，欢迎关注我的微信公众号：码不停蹄的小鼠松（微信号：busy_squirrel），也可扫下方二维码关注获取最新文章哦~

策码奔腾的小单

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
web界面图片自适应解决方案

更多2019年的技术文章，欢迎关注我的微信公众号：码不停蹄的小鼠松（微信号：busy_squirrel），也可扫下方二维码关注获取最新文章哦~做前端页面时，图片自适应问题总是很头疼，这里首先说明一下碰到的问题：在前期做项目中的过程中，刚开始并没有考虑到浏览器的版本兼容性问题，默认的用chrome开发，于是对于登陆页面的背景图片，用了如下写法：<div id="Layer1...
复制链接

扫一扫