你这样的写的话 不先赋值给thumbnail统一的高度的话恐怕页面会显得参差不齐而不是你想的4块模块平均撑开页面，还有你是把图片写进div你当背景，那就不需要js来处理这个问题。
<style>#thumbnailbox{position: absoluteleft:0top:0width:100%height:100%}
#thumbnailbox a{width:50%height:50%display:blockposition:absoluteleft:0top:0}
#thumbnailbox a.bg1{background:url(../images/1.jpg) 50% 50% no-repeat}
#thumbnailbox a.bg2{left:50%background:url(../images/2.jpg) 50% 50% no-repeat}
#thumbnailbox a.bg3{top:50%background:url(../images/3.jpg) 50% 50% no-repeat}
#thumbnailbox a.bg4{left:50%top:50%background:url(../images/4.jpg) 50% 50% no-repeat}
</style>
<div id="thumbnailbox">
<a href="post_1.html" title="缩略图1" class="thumbnail bg1"></a>
<a href="post_1.html" title="缩略图1" class="thumbnail bg2"></a>
<a href="post_1.html" title="缩略图1" class="thumbnail bg3"></a>
<a href="post_1.html" title="缩略图1" class="thumbnail bg4"></a>
</div>
首先，最简单的办法是把宽和高设为相同的固定值。但是如果是采用自适应布局的，比如正方形的宽是屏幕宽度的50%，则要这样：
<div style="width:50% height:50vw background-color:#f00"></div>唯一要注意的就是可能存在浏览器兼容问题，不过我在手机微信内置浏览器以及电脑的Chrome上测试都没问题
首先，把宽和高设为同样的固定值，则肯定是正方形，这个不用多说；
其次，如果是自适应的界面，需要用百分比来设置正方形的边长，则可以用css3的新增长度单位vw、vh来设置，1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport height）的百分之一。比如下面这个正方形的边长是屏幕宽度的50%：
<div style="width:50vw height:50vw background-color:#888"></div>
但是，这个方法要求浏览器支持css3，一些老的浏览器可能就不支持了。
