如何查看网页上图片的尺寸大小呢？

我们在为我们网站上传资料的时候，会不会经常遇到把我们自己好看的图片上传上去的时候，为什么就在网站展示出来的时候变形了，这样太丑啦。。。

一个失败的案例

大家都知道这个传上去肯定是大大大...影响了网站的整体美观了，那图片变形的原因是什么呢？米维小编告诉大家，这个主要是我们上传的图片尺寸跟网站要求的尺寸不匹配导致的，我们要想图片不变形，最重要的还是要学会查看网站上图片的尺寸大小，我们再根据这个尺寸去做精美的图片。

在这里，小编想教大家学会查看网页上的图片尺寸：

网页上展现出来的图片分为两种，一种是直接<img src="">的图片代码直接展示出来的，还有另外一种是写在css里面当做背景的  emmmm... background:url();就是这个玩意...

当然两种查看尺寸大小是有一点区别的，首先我们来讲解第一种最直接的，非常的简单；

我们先打开360浏览器（这里不是打广告，毕竟小编没有收广告费!!!∑(ﾟДﾟノ)ノ），我们随便打开一个网站试验下，打开之后我们首先打开浏览器的设置->工具->开发人员工具

然后点击开发人员工具左上角的一个小图标↓↓↓

然后我们鼠标移动到我们想要查看的图片上去，就会出现我们图片被选中的那个效果，左上角就会出现这个图片的尺寸大小了。

我们可以看到我们这个查看的图片大小是214*159（px），左宽右高...这就是我们第一种查看图片尺寸大小的方法，非常的简单。第二种就会稍微多点步骤，下面请看第二种方法查看网页背景图片大小：

同样我们打开开发者工具然后选中小图标选到我们要查看的图片上面

我们发现这个选中这个区域已经大于这个图片了，其实我们是选中了装图片的容器，图片在这个容器里面的样式中，我们可以看到右下角蓝色的部分是图片的链接，我们鼠标移上去右键；

把图片在新的窗口打开

然后我们在图片上面右键点击属性

这样我们就能看到这种轮播图的大小是1600*523（px）了，当然这种方法也是可以帮你们在别人网站下载他们的图片的...(✪ω✪)，是不是感觉又学到了一招。

ok，这以上就是教大家怎么在网页上获取图片尺寸大小的方法，如果不理解，可以动动手试验下。

米维原创，转载标注出处