长焦点图的解决方案（全兼容）

最新推荐文章于 2023-07-21 23:10:46 发布

weixin_30632883

最新推荐文章于 2023-07-21 23:10:46 发布

阅读量81

点赞数

原文链接：http://www.cnblogs.com/xjchenhao/p/4014138.html

版权

我们都知道网页的标准可视区应该为1003px，这是为了防止低分辨率的显示器下显示横向滚动条。假如现在有这样一个需求，一个网页中要放一张1440px宽度的焦点图，而且要求居中。

这时候我们理所当然的想到了 1440px的图片或者它的容器写上margin:0 auto，高分辨率的屏幕下（宽度大于1440px），它确实实现了1440px图片的居中了，但是在低分辨率的屏幕下（宽度小于1440px）时，它却出现了滚动条！为什么？？
思考下，为什么写上margin:0 auto会让容器居中呢？因为它的左右外边距是auto，它的居中是左右外边距auto撑开的。假如你的图片都大于你的分辨率了，它怎么把左右边距撑开(没有撑开的空间了)，怎么居中？！那怎么办呢？

这种需求我遇上第二次了，第一次是做天眼教育的时候，当时实在想不出好的办法了，最后用背景图的方式实现了这个需求。这次做惜康环境建设又遇上了，这次我终于想出了个科学点的办法。代码如下：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>长焦点图的解决方案</title>
<style>
*{margin: 0;padding: 0;list-style:none}
.box{position:relative;overflow:hidden;height:362px}
.slide{position:absolute;top:0;left:50%;margin-left:-720px}
.slide li{width:1440px;height:362px;position:absolute;left:0;top:0;}
.slide img{width:1440px;height:362px;}
</style>
</head>
<body>
<div class="box">
    <ul class="slide">
        <li><img src="http://tet.cenvol.com/ch/xk/image/header_img1.jpg" /></li>
        <li><img src="http://tet.cenvol.com/ch/xk/image/header_img1.jpg" /></li>
        <li><img src="http://tet.cenvol.com/ch/xk/image/header_img1.jpg" /></li>
    </ul>
</div>
</body>
</html>

一个容器.box，不限定它的宽，那么它的宽将是auto，.box的width为auto意味着，它的宽度是可变的，一直等于浏览器的宽度。position:relative，是为了内部元素定位用的。因为内部元素会使用position:absolute，会脱离常规流（文档流），所以我们有必要加一个容器的高。
然后是需要居中的元素. slide。这里我用了做水平垂直居中元素的方法，给它写了position:absolute;left:50%;margin-left:-720px；让元素的原点处在.box容器的中心位置，然后在用margin-left的负边距把元素往左移动元素一半宽度的距离。
接着的代码就是正常的焦点图写法了。
在线地址：http://runjs.cn/code/vxulgaih

转载于:https://www.cnblogs.com/xjchenhao/p/4014138.html