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

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

<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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值