首页 编辑日志 入门学习 正文

网站主要位置图片尺寸

本文章主要用于标记网站各主要位置图片尺寸,以备查阅。

在此之前,先讲一下为什么要标明每套图片的尺寸。通俗的话讲就是保证像素点对点,图片看起来不变形,网络存储、流量不浪费。举个两个简单的例子:1)如果1920*1080的FHD尺寸的手机屏幕全屏显示1024*768尺寸的图片,处女座的同学是不是有点不爽;2)如果一个网页上显示大概10张8MB左右图片,您用手机访问一次,是不是当天的流量任务就超额了?(●'◡'●)(话说例子有点牵强啊,实在编不下去了,有人脑洞大的可以帮忙修改下,但是这一点必须要让很多NewMan知道啊!)

再讲一下如何精确获取图片尺寸,现在新一代浏览器的开发者工具比较先进,给了我们很大的便利性。

如果想获取图片尺寸,以IE11为例,一般方法如下:

1)在浏览器中打开在需要获取图片尺寸的页面,按下键盘中的F12功能键,弹出如下窗口,在窗口中单击“DOM资源管理器(Ctrl+1)”按钮之后,再单击“选择元素(Ctrl+B)”按钮。如图:

步骤一

步骤一

 

2)之后在网页中单击选取需要获知尺寸的图片。如图:

步骤二

步骤二

3)仔细观察在DOM树中处于选中状态的是否是img标签,如不是,请小心的选中DIV或类似标签中的img标签,并和浏览器中的图片对应。如图:

步骤三

步骤三

4)在开发人员工具窗口中单击“布局”标签,在Pading中的尺寸一般为获取图片的尺寸。如图:

步骤四

步骤四

注:一般情况如上所述,某些图片(例如Flash框架中的图片)位置比较复杂,比较难以定位,如果遇到下面没有标注尺寸的图片,自己也不能获知图片大小,可以在下方留言。

还有一种很多人采用的比较简单的方法,就是用QQ之类的截图软件自己去截图的时候粗略获取图片尺寸,这种方法不做说明,一张截图解决问题。如图:

QQ获取截图尺寸及当前光标下像素颜色

QQ获取截图尺寸及当前光标下像素颜色

注:精确截图推荐Snagit,粗略截图推荐PicPick,前者之所以精确是因为光标位置是在两个像素点之间,一般截图软件光标位置是在像素点上,好好感觉。(不过Snagit官方是英文版的,又略有点臃肿的样子)

说了一堆教程,主要是想让头脑灵活的人自己动手,学会一项技能。下面把我测量下来的一些常用的图片尺寸记录下来,时间截至2014.11.25,如有更改,希望好心人帮忙修改下数字哈。提醒一下,善用搜索,在浏览器中按下Ctrl+F,在搜索框中输入想要栏目名称命中率会高一点。

新闻网首页:

头屏幻灯片:width: 576px; height: 323px;(这尺寸有点奇葩)

Top视频直送Poster图片:width: 280px; height: 210px;

Top视频直送下方图片:width: 300px; height: 80px;

毓秀人物、记者观察头条图片:width: 90px; height: 72px;

专题新闻头条图片:width: 310px; height: 100px;(据说这张图一般选专题内容页顶部大图上传,如果变形不是很厉害,直接上传大图系统会自动截取成小图)

文艺园地头条图片:width: 120px; height: 90px;

图说河大图片:

第1张:width: 378px; height: 270px;

第2张:width: 234px; height: 270px;

第3-6张:width: 188px; height: 133px;

常见链接图片:width: 145px; height: 80px;

专题网首页:

头部幻灯片图片:width: 1000px; height: 320px;

全部专题图片:width: 310px; height: 100px;

常见链接图片:width: 145px; height: 80px;

图片库(图酷)首页:

头部幻灯片图片:width: 1000px; height: 448px;

最新组图图片:

小图(第1、2、4、5、6、7张图):width: 190px; height: 130px;

大图(第3张图):width: 390px; height: 270px;

校园风光图片:width: 190px; height: 130px;

老照片图片:width: 190px; height: 130px;

常见链接图片:width: 145px; height: 80px;

电视台首页:

头部幻灯片图片:

大图:width: 640px; height: 400px;(话说这个动来又动去的要量DIV才能看明白,上传图片尺寸用大图尺寸)

小图(导航缩略图):width: 137px; height: 86px;(这个尺寸可以无情的忽视掉了,因为和大图调用的同一张图,优先保证大图质量,小图质量牺牲一下)

河大新闻Poster图片:width: 314px; height: 240px;

河大讲堂图片:width: 235px; height: 150px;

校园聚焦图片:width: 235px; height: 150px;

晴彩视频图片:width: 235px; height: 150px;

推荐视频图片:width: 235px; height: 150px;

学生原创图片:width: 215px; height: 150px;(这一张图和前面几张图的宽度不一样,仔细看一下)

常见链接图片:width: 145px; height: 80px;

部分栏目内容页:

活动栏目内容页面顶部大图:width: 960px; height: auto; max-height:500px;(主要是为了满足大家需要,高度设置为自动,但是不能大于500px(像素(话说这么复杂括号对吗?(谁来帮忙修改下最好了!))))

活动栏目内容页图片:max-width: 590px; height:auto;(这一点不用担心,上传大 一点的图片都会被系统自动调整的)

投票栏目内容页评选模式下顶部大图:width: 960px; height: 240px;(限定条件比较多)

投票栏目内容页评选模式下项目缩略图:width: 180px; height: 135px;(默认的啦,可以在上传内容时后台设置,但是如果设置不好的话前台会变形的,这部分只要是上传图片系统在前台显示的时候会自动缩小图片,不用过于操心,不过好像上传图片的时候有的浏览器上传不上,系统开发者用的火狐,所以如果有问题的话可以用火狐浏览器试一下。)

文章内容页图片:max-width: 620px; height:auto;(这一点不用担心,上传大 一点的图片都会被系统自动调整的)

组图内容页图片:max-width: 960px; max-height:1400;(系统自动截取,先到哪个尺寸先切哪儿,等比例缩放,注意:对联/春联这种高端货最好上下联合在一起上传,不然会变贪吃蛇的)

组图内容页下方推荐组图图片:width: 150px; height: 110px;

组图内容页下方组图排行图片:width: 150px; height: 110px;

 -----------------------------------------------

有一点要统一说明一下,网站页面分等级的时候我用的习惯是:网站首页(子网站首页也叫首页)->顶级(一级)栏目页->二级栏目页(有人也叫子级栏目页)->三级栏目页(注意是栏目页,不是内容页,暂时本网站没有三级栏目页)->内容页,可能和其他人的命名习惯不太一样,所以,相互交流了解能够便于沟通,用于高效解决问题才是比较好的。嗯嗯,语言能力不太好,有技术好一点的可以帮忙修改一下哈。

责任编辑:王宾
0

最近更新

关于我们 新闻中心 我要报料 版权声明 免责声明 网站地图

Copyright 2009-2011 news.hbu.cn. All rights reserved. Best view 1440*900

河北大学新闻中心版权所有,北京中科之源技术支持

冀ICP备05007415号