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