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

2018-03-06 12:21:42 浏览数 (2)

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

代码语言:javascript复制
<div style="height: 355px; overflow: hidden; position: relative; width: 100%;">
  <img alt="华厦眼科医院集团" src="http://www.tongruieye.com/xeyk/images/jtfbt.jpg" style="display: block; height: 355px; left: 50%; margin-left: -960px; position: absolute; width: 1920px;">
</div>

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

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

0 人点赞