兼容多种屏幕分辨率的通栏大图实现方法

     诸如天猫，京东，当当等购物平台上的通栏大图效果使用的商家越来越多，下面就以图文的方式解说下如何实现这种效果：

1. 条件要求：

　　可以对模板进行自定义代码编辑即可，当然如果有通栏模板，那就更省事了，这里就不说了。

大部分平台都还是没有通栏模板的。但是只有平台模块中可以自定义编辑代码，只要不屏蔽样式，就可以实现通栏大图效果。

2.原理解析：

       通常都是通过在首图层div中添加两个div实现的，第一个div绝对定位，包含带有超链接的通栏图片，第二个div相对定位，定义高度，添加超链接。

       也就是，第一个div负责展示通栏大图，但是不占位置，第二个div只是给首图展示占位置的。同样也可以添加超链接。

3.关键代码如下：

 

<div id="div1" style="margin-left:-960px;width:1920px;left:50%; position:relative;">
      <a href="http://www.cnblogs.com/xyyt" target="_blank">
            <img src="http://img01.jpg" height="600" />
      </a>
 </div> 

 

4.使用方法，只需要使用代码中的div容器，设置相应样式，添加图片和超链接后，通过模块编辑器插入到后台模块即可。

　1. div1为通栏层，其样式中须有

　　margin-left:-960px;width:1920px;　//width是通栏大图的宽度，根据实际情况修改，margin-left的值设置为width值的一半。

　　left:50%; position:relative;　　　　//这两个样式值不用修改

　　注意：如果平台系统不屏蔽z-index样式，可以添加z-index:9999，将通栏显示在最外层

　2. 通栏大图，超链接在div1中实现

　3. div2起站位作用，高度设置为图片高度。

5.总结：

　　一般来说，购物平台页面中多是980px宽居中较多，不论宽度多少，显示器分辨率多大，只要是居中显示，用上面的方法实现的通栏大图，都能最完美的将1920px宽的图片以居中的方式呈现在页面上，只要将图片主体部分居中设计即可，无论用户显示器分辨率多大，只要不超过我们的图片宽度1920,都能将我们的大图居中的展示出来。不必在担心不同的电脑屏幕上看到大图的位置不一样的情况了。