Web中图片的使用，下载与切图

一、图片的使用

1、图片在网页中的默认排列顺序

<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
		

2、展示效果

 

3、图片布局：默认从左到右排列，以底部对齐，如果页面一行展示不完所有图片，则会默认换行。

4、设置图片大小，在img标签内，设置宽度width或者高度hight大小，单位为px（像素单位），图片会等比例缩放，如果同时设置宽和高的大小，要注意图片本身的宽高比例，否则会导致图片变形。

1).仅设置width的值

代码如下：

<img src="img/1.jpg" width="300px" />
<img src="img/2.jpg" width="300px" />
<img src="img/3.jpg" width="300px"/>
<img src="img/4.jpg" width="300px"/>
<img src="img/5.jpg" width="300px"/>

效果：

2).仅设置height的值

<img src="img/1.jpg" height="300px" />
<img src="img/2.jpg" height="300px" />
<img src="img/3.jpg" height="300px"/>
<img src="img/4.jpg" height="300px"/>
<img src="img/5.jpg" height="300px"/>

3).同时设置宽和高，如果不按照原有的图片比例设置，会导致图片变形。

<img src="img/3.jpg" height="300px" width="300px"/>

效果：

4).有时候图片的宽度过于大，导致页面打开后会横向有滚动条出现，这时可以设置图片的宽度为100%，让其宽度撑满父级，此使img标签在body中，因此img的宽度撑满网窗口的宽度。

原图片

<img src="img/6.jpg" />

设置width为100%

<img src="img/6.jpg" width="100%" />

二、图片的下载

1、在网页上看到的图片可以点击鼠标右键，选择【图片另存为...】然后保存到本地文件夹中，如图所示：

2、当图片另存为本地时，可以看到文件名的后缀，.***为.png或者.jpg或者.jpeg都是图片类型，可以直接保存，如下图所示：

3、有时候图片另存为本地时，文件名后缀不为图片格式，可以手动更改文件名的后缀，改为【png】【jpg】等，如下图所示

4、当右击网页中的图片，没有【图片另存为...】时，可以按键盘【F12】，打开开发者工具，然后点击选择工具，鼠标选中图片，可以查看到该图片的源代码，如果代码中没有图片地址，可以到右侧style工具栏中查看，找到图片地址后，右击鼠标选择【Open in the new tab】，则会在新的窗口内打开图片，再将图片另存为本地即可。

具体操作过程如下：

1).没有【图片另存为...】的情况

2).使用开发者工具查找图片路径

三、切图

当从网站上下载的图片是一个大图片的一部分时，这就需要切图将需要的图片了

1、下载安装专业的工具：photoShop

网盘链接: https://pan.baidu.com/s/10ucpjnw-axfcjqCz7qTmag 提取码: ngfg 

2、使用photoShop打开图片文件，选择【切片工具】，选中需要切割的图片区域，然后点击【ctrl+alt+shift+s】，选择【用户切片】，点击【保存】

具体步骤如下图所示：

接下来的步骤：

四、文章总结

1、web开发中，图片的默认排列顺序以及宽高设置

2、在网页中如何下载图片，以及下载图片的方式

3、使用Photoshop对图片进行切图