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

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

相关文章

来自专栏知无涯

PS给照片换背景的小技巧[易学易用]

38817
来自专栏西枫里博客

SEO中不可忽视的h1到h6的应用

那天在群里有位SEO大拿,于是我吵吵着让大佬帮我看下我的博客优化还能怎么搞,他回我说我的博客缺少h1标签。从这里拉开了话题。着重聊了些h1标签的内容,其实也都是...

452
来自专栏搞前端的李蚊子

基于Echarts4.0实现旭日图

昨天Echarts4.0正式发布,随着4.0而来的是一系列的更新,挑几个主要的简单说明: 1.展示方面通过增量渲染技术(4.0+)ECharts 能够展现千万级...

4507
来自专栏大数据钻研

手把手教你打造一个纯CSS图标库

来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉...

2984
来自专栏企鹅号快讯

6个超实用的AI小工具

? 6个超实用的AI小工具 BGM:鬼火の童・鬼切、虎徹にございます! 今天学习的AI实用小工具,分分钟帮我们提高666倍工作效率,让我们听着这首欢快魔性的小...

2128
来自专栏数据小魔方

条件格式单元格图表

今天跟大家分享条件格式单元格图表! ▼ 这类图表比较特殊,不是通过excel的内置图标库制作,而是通过excel的条件格式工具制作的存放在单元格中的图表。这种图...

3178
来自专栏小狼的世界

颜色、网页颜色与网页安全色

我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。(在印刷上,颜色是四种颜色合成的,这个是表示方式上的不同。)每一种颜色的饱和度和透明度都是可...

762
来自专栏拂晓风起

【Fanvas技术解密】HTML5 canvas实现脏区重绘

1342
来自专栏进步博客

深入理解视觉格式化模型( VISUAL FORMATTING MODEL)

“理论不懂就实践,实践不会就学理论”,非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免...

1213
来自专栏HTML5学堂

几个前端工程师应当掌握的“词语”

HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少? 有不少前端开发工程师,可能并不清楚下面的部分词语,...

3436

扫码关注云+社区