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

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

相关文章

来自专栏同步博客

PHP中遍历XML之SimpleXML

  简单来讲述一些XML吧,XML是可扩展标记语言,是一种用于标记电子文件使其具有结构性的标记语言。XML是当今用于传输数据的两大工具之一,另外一个是json。

581
来自专栏前端说吧

Html2canvas - 项目中遇到的那些坑点汇总(更新中...)

8925
来自专栏无所事事者爱嘲笑

经常遇到的浏览器的兼容性有哪些?

1415
来自专栏李蔚蓬的专栏

HTML & CSS 知识点梳理(内涵大量Demo噢~)

1.<html>标记 <html>标记是HTML文件的开头。所有HTML文件都是以<html>标记开头,以</html>标记结束,HTML页面的所有标记都要放...

782
来自专栏CRPER折腾记

Angular 2 + 折腾记 :(6) 动手实现只有年月的小组件

这个组件实现并不是很复杂,我会尽量注释; 这货诞生的理由就是项目刚好有一个地方必须只能选择年月,而github上ng2+日期组件都涉及到年月日或时分秒; 效果用...

601
来自专栏AndroidTv

属性动画 ValueAnimator 运行原理全解析

好,废话不多说,之前我们已经分析过 View 动画 Animation 运行原理解析,那么这次就来学习下属性动画的运行原理。

3618
来自专栏程序员互动联盟

【专业文章】六种常见的HTML5写法误用(一)

一、不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用...

3065
来自专栏西枫里博客

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

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

422
来自专栏十月梦想

console.log新玩法

console.log支持多样化玩法,这里以console.log的css内容输出为例,也就是console.log()输入多样化内容

845
来自专栏Nian糕的私人厨房

CSS banner图响应式居中显示

在 PC 网站首页,banner 图作为网页中最大的一张图片,在传达网页的的主要信息的同时,也吸引着浏览者的所有注意力,所以 banner 图的展示方式直接影响...

593

扫码关注云+社区