`
rather_lonely
  • 浏览: 92072 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

超宽图片居中显示

    博客分类：
  • css
 
阅读更多
纯css实现超宽图片全屏居中（兼容淘宝店铺）
作者：艺灵设计 来源：http://www.yilingsj.com 时间：2013-10-24 11:57:59 5 / 12870 扣除点数：0
适用范围：付费/未付费的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实现超宽图片全屏居中（兼容淘宝店铺）</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<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="http://www.yilingsj.com"><img src="http://img03.taobaocdn.com/imgextra/i3/1758846006/T2yh8FXwJaXXXXXXXX_!!1758846006.jpg" /></a>
　</div>
</div>
</body>
</html>
　提示：【复制代码】与【保存代码】功能暂只支持ie内核哦^v^

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

为了淘宝的亲们方便操作，下面附一张说明图，希望对亲们有所帮助。


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

.sn-simple-logo(适用于未付费/付费的B店)
.footer-more-trigger(适用于未付费/付费的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>
操作如下图：

要发布才能展示全屏的哦，预览无效！

续(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>
分享到：
| 导出excel自定义RGB颜色
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics