纯css实现超宽图片全屏居中（兼容淘宝店铺）

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-24 11:57:59　-　阅:　-　评:5　-　积分:0

适用范围：已开通/未开通旺铺css的B/C店

图片是一个网站中必不可少的一部分，网站因图片而变得更加丰富多彩。一张好看的图片，特别是banner图，可以给人一种盛气凌人的感觉，这就是洒家所理解的大气！如何才能做到更加大气呢？

首先要处理好图片。说到处理好图片，除了清晰度外还要考虑一个因素，那就是尺寸。不同的显示器在不同的用户手中会体现出是不同的分辨率。如最经典的大头电脑是1024*768的，普通的笔记本是1366*768,液晶台是1400*900，也有液晶台式是1600*900等等。在如此多的分辨率面前图片的大小显示格外重要。如果你设置的图是1024*768的，在大头电脑面前当然是一个大气的网站，但换成是1600*900的电脑前就变得秀气许多。因此，一些设计师在设计图片时经常将图片设计成1920宽度。对于如此宽的图片如何才能将最重要的内容展现在用户眼前呢？我们都知道，1920宽度显然超出1600*900的屏幕范围，要想将重要的内容也就是中间部位展现出来，图片必定要进行居中处理。通常我们让一个小于屏幕分辨率的容器居中时用一个margin:0 auto；就搞定了，但超出屏幕分辨率的还是此方法行吗？当然是不行的了。不信你可以进行测试，结果会发现下面出现了横向滚动条而且图片最左边依旧对着屏幕最左边。那么究竟该怎么弄呢？js?jq?其实都不用，利用负值+定位就可以轻松的搞定这个问题。源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.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=utf-8" />
<title>纯css实现超宽图片全屏居中（兼容淘宝店铺）--艺灵设计，qq群：231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="纯css实现超宽图片全屏居中,淘宝全屏banner,淘宝店铺装修,全屏模板框架,sn-simple-logo,footer-more-trigger">
<style type="text/css">
*{margin:0; padding:0;}
body{overflow:hidden;}
a img{border:none;}
a{display:inline-block;}
/*超简单的全屏框架*/
.qp{width:1920px; margin-left:-960px;position:absolute;left:50%;text-align:center}
</style>
</head>
<body>
<div style="height:598px;">
　<div class="qp">
　　<a href="/code/2013-10-24/103.html"><img src="/d/file/div/2013-10-24/纯css实现超宽图片全屏居中（兼容淘宝店铺）.jpg" title="纯css实现超宽图片全屏居中（兼容淘宝店铺）.jpg" /></a>
　</div>
</div>
</body>
</html>

点此下载：→→纯css实现超宽图片全屏居中（兼容淘宝店铺）.zip　　

怎么样，搞定了吧。更换成任何小于1920宽度大于屏幕分辨率的图片都可以完美实现全屏居中，至于1920以外的图片就需要更改下代码了，读者可自行更改。如果图片小于1920时，图片也会自动居中的哦。上面的代码实际上是一个框架，而我们要做的是里面的内容。个人感觉这个框架超简单，只用了一个定位就实现了，比起用两个定位来实现要简单的多。只要架好框架，里面内容什么的都已经不是问题了。忘记说了，此框架在淘宝里面也是可以的哦，可以在淘宝里面搜索“马尔杜克”，店铺是洒家装修的哦！

为了淘宝的亲们方便操作，下面附一张说明图，希望对亲们有所帮助。
纯css实现超宽图片全屏居中（兼容淘宝店铺）说明图

2013.10.31　更新　　　

之前看到不少商家写了双重的定位，当时感觉这个是多此一举，但在今天看来，发现自己真的错了，首先我向党忏悔，我有罪，主啊，原谅我吧......好了，废话不多说了，接下来就仔细分析下这个双重定位全屏。首先来看下这个双重定位的样式名称。

.sn-simple-logo//适用于B店
.footer-more-trigger//适用于C店
.most-footer//适用于C店

咳咳，这个是系统自带的哦，亲们可以用chrome,ff,opera,360等浏览器右键你懂的哈。由于淘宝里面在模块内容里面屏蔽了absolute,没有付费开通样式的商家就无法定义全屏居中，这下可苦逼了不少美工。但好在天无绝人之路，可以利用系统自带的样式来实现全屏居中。

<div style="height:400px">
　<div class="sn-simple-logo" style="left:50%">
　　<div class="sn-simple-logo" style="left:-960px">
　　  <div style="width:1920px;background:#f00;height:400px;text-align:center;">
　　    轮播，图片，内容什么的都放这个里面
　　  </div>
　　</div>
　</div>
</div>

操作如下图：
未开通旺铺CSS的店铺使用此全屏居中代码框架
要发布才能展示全屏的哦，预览无效！

2014.01.23　更新　　　

好像这几天天猫又有小改动了，这次将前面的全屏框架给弄掉了。不过不用担心，方法总是会有的，下面就附其中一个能用的，估计过完年来了后可能又不能用了吧，到时再说吧。附样式：

.sn-msg-box//此样式为系统默认字段，只需要复制下面的模块内容即可！

<div style="height:400px">
　<div class="sn-msg-box" style="left:50%;right:auto;top:inherit;">
　　<div class="sn-msg-box" style="left:-960px;right:auto;top:0;">
　　  <div style="width:1920px;background:#f00;height:400px;text-align:center;">
　　    轮播，图片，内容什么的都放这个里面
　　  </div>
　　</div>
　</div>
</div>

?　更新　　　

后因官方系统更新，1月23号的更新已失效，10月31号的又生效了-_-！

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2013-10-24/103.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！