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

  现在大多数用的显示器都是大屏的,所以我们美工在设计海报时都会用大图,但还是有一部分朋友是用小屏幕,那么,如何实现大图居中超过的部分两边自动隐藏呢?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 条评论
登录 后参与评论

相关文章

来自专栏张戈的专栏

WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法

自从肉牛、钢材等垃圾评论泛滥,很多朋友都用上了各种评论验证方案,其中一个比较惹眼的就是张戈博客目前在用的 myQaptcha 滑动解锁。 ? 很久之前张戈博客已...

3245
来自专栏PHP技术大全

使用PHP辅助快速制作一套自己的手写字体实践

笔者以前在网上看到有民间高手制作字体的相关事迹,觉得把自己的手写字用键盘敲出来是一件很有意思的事情,所以一直有时间想制作一套自己的手写体,前几天在网上搜索了一下...

633
来自专栏张戈的专栏

PHP制作百度站内搜索绿色通道的网页列表数据文件

用过百度站内搜索的朋友,都知道前不久推出了一个绿色收录通道,改善站内搜索的时效性和覆盖率,说明如下: 站内搜索结果数太少?最新的页面搜不到?您可以在本页面提交数...

3137
来自专栏木头编程 - moTzxx

微信公众平台开发[1] —— 获取用户Openid及个人信息

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

731
来自专栏Hongten

python开发_tkinter_修改tkinter窗口的红色图标'Tk'

学过java的swing可能知道,在创建一个窗口的时候,窗口的左上角是一个咖啡图标

823
来自专栏freesan44

实现 iOS 前台时的推送弹窗效果

原文链接:http://www.jianshu.com/p/67864e1c2085

572
来自专栏IT派

厉害!黑客怎样用谷歌查找信息?

IT派 - {技术青年圈} 持续关注互联网、区块链、人工智能领域 黑客去入侵一个网站的时候往往需要搜集它的很多信息,这其中包括利用网站漏洞,社工,还有就是用...

3356
来自专栏FreeBuf

Twitter信息抓取工具 – TinfoLeak

TinfoLeak是一款Python编写的Twitter用户信息抓取软件,主要的抓取的信息有: 1、基础信息包括名字、头像、关注者、所在位置等。 2、Twitt...

2566
来自专栏向治洪

android的适配方法

首先要介绍一下drawable-mdpi、drawable-hdpi-1280x800、drawable-hdpi。这个相信好好看一下也明白。就是代表着分辨率 ...

1787
来自专栏freesan44

实现 iOS 前台时的推送弹窗效果EBForeNotification

或许很多童鞋还不知道,在 iOS 中收到推送通知时,如果 App 处于前台运行的情况下,推送的顶部弹窗是不会弹出来的。

831

扫描关注云+社区