本文作者:DurkBlue

CSS3如何实现超宽图片全屏居中呢?推荐

CSS3如何实现超宽图片全屏居中呢?摘要: 图片是一个网站中必不可少的一部分,网站因图片而变得更加丰富多彩。一张好看的图片,特别是banner图,可以给人一种盛气凌人的感觉,那么如何才能做到更加大气呢?最近学员在学习网页制作...

图片是一个网站中必不可少的一部分,网站因图片而变得更加丰富多彩。一张好看的图片,特别是banner图,可以给人一种盛气凌人的感觉,那么如何才能做到更加大气呢?最近学员在学习网页制作CSS时都遇到了这个问题, 下面来说下
       
首先要处理好图片。说到处理好图片,除了清晰度外还要考虑一个因素,那就是尺寸。不同的显示器在不同的用户手中会体现出是不同的分辨率。如最经典的大头电脑是1024*768的,普通的笔记本是1366*768,液晶台是1400*900,也有液晶台式是1600*900等等。在如此多的分辨率面前图片的大小显示格外重要。如果你设置的图是1024*768的,在大头电脑面前当然是一个大气的网站,但换成是1600*900的电脑前就变得秀气许多。因此,一些设计师在设计图片时经常将图片设计成1920宽度。对于如此宽的图片如何才能将最重要的内容展现在用户眼前呢?我们都知道,1920宽度显然超出1600*900的屏幕范围,要想将重要的内容也就是中间部位展现出来,图片必定要进行居中处理。通常我们让一个小于屏幕分辨率的容器居中时用一个margin:0 auto;就搞定了,但超出屏幕分辨率的还是此方法行吗?当然是不行的了。不信你可以进行测试,结果会发现下面出现了横向滚动条而且图片最左边依旧对着屏幕最左边。那么究竟该怎么弄呢?js?jq?其实都不用,下面的两种方法都可以,大家可以套用哟。源码如下:

CSS3如何实现超宽图片全屏居中呢? 第1张

此篇文章由DurkBlue发布,转载一下需要注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2019-11-16
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,1748人围观)参与讨论

还没有评论,来说两句吧...