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

最新推荐文章于 2023-10-07 14:03:30 发布

codeLiuhy

最新推荐文章于 2023-10-07 14:03:30 发布

阅读量1.3k

点赞数 2

分类专栏： h5基础篇文章标签： html5

本文链接：https://blog.csdn.net/qq_42000660/article/details/118441165

版权

h5基础篇专栏收录该内容

23 篇文章 2 订阅

订阅专栏

一、图片的使用

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).没有【图片另存为...】的情况