码迷,mamicode.com
首页 > 其他好文 > 详细

如何实现大图居中超过的部分两边自动隐藏

时间:2016-07-21 19:25:14      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:

  现在大多数用的显示器都是大屏的,所以我们美工在设计海报时都会用大图,但还是有一部分朋友是用小屏幕,那么,如何实现大图居中超过的部分两边自动隐藏呢?ytkah也遇到这样的情况,一起来看看怎么解决吧

<div style="overflow: hidden; width: 1920px; height:623px;">
    <img style="margin-left:-960px; position: absolute; left: 50%;" src="http://www.qdhxeye.com/special/hlj/img/hlj_01.png" alt="" />
</div>

  需要为div设置一个高度,本例是623px,自动隐藏的属性overflow:hidden。然后要为图片设置left:50%;margin-left:960px(图片长度的一半);position:absolute;

  这样改造之后基本上通用的屏幕都能正常显示图片的中间部分,不会出现左右推移的情况发生

如何实现大图居中超过的部分两边自动隐藏

标签:

原文地址:http://www.cnblogs.com/ytkah/p/5692609.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!