浏览器窗口放大缩小后页面内容居中解决方法

先说下简单的思路：

1.获得窗口的大小，高度，宽度。

2.要知道显示的图片（我这里用图片举例）的大小，宽，高。（我的图片显示设置为 宽：960，高600 ）

3.简单算法，获得的浏览器宽，高 减去 图片的宽，高 除以2 就是 间隔距离了。

4.当然还有获得窗口放大，缩小的事件了。根据事件来设置（margin）。

 

首先将图片弄到body里面，代码如下：

（不知道怎么添加代码块，只有写出来了。）

 

 

  
 

 

body 里面就只有两个div 图片套了一下。

 

加点 CSS 样式：（吐槽下：我对CSS 不专业。）

 重点是下面的代码：

先解释下：jquery自带的 resize() 方法是可以监听窗口放大缩小事件的。但是我在网上搜索了下：jquery 自带的 resize(） 方法在IE下会执行两次。

下面的这些代码是 W3CSCHOOL 上面的样例源码，测试之 resize() 方法是执行的两次。

窗口大小被调整过 0 次。

请试着重新调整浏览器窗口的大小。

所以我在这里用了别人重写的resize(）方法的插件。 jquery.ba-resize.js

这个是插件的下载地址：点击打开链接。

用这个插件直接一样的 $("selecter").resize(handler); 语法写。

 

下面就是js代码了。

这是我想出的方法来解决这个问题。希望能够看懂。

如果有更好的防解决 “窗口放大缩小后内容居中的问题”可以相互讨论。

转载自：http://m.blog.csdn.net/blog/qqyangwang/8513662