关于图片的使用
文本主要介绍:修改图片大小或比例、图片对齐方式、图片的并排以及使用心得。
前言
我们在写博客的时候经常会插入图片来使博客一目了然。但是图片的大小、对齐方式往往会影响美观。
图片太大,显得突兀;图片太小,又显格格不入。下面跟大家说说我所收集的一些关于图片的使用技巧。
图片语法
-
插入图片的语法如下。
-
语法说明如下。
- 图片代替文字在图片无法正常显示时会比较有用,正常情况下可以为空。
- 图片地址可以死本地图片的路径也可以是网络图片的地址。
- 本地图片相对路径和绝对路径两种方式。
修改大小
方法 1
语法如下。
![描述](https://img-blog.csdnimg.cn/20200323204819408.jpg =200x200)
注意:= 前有个空格,可以只写宽度,但 x 不能去掉。如 =200x
演示如下。
小技巧
修改图片的比例有
- 【1:1 】
- 【3:2】
- 【4:3】
- 【16:9】
什么意思呢?我们以【16:9】为例
可以宽为160像素,高为90像素。
也可以宽为320像素,高为180像素。
我们在插入图片时,图片地址往往会很长很长,写作时看着不简洁。
我们可以去掉.jpg
后面的字符,图片还是正常显示的。
小编现在还不知道.jpg
后面代表的是啥~
有大佬知道的会可以下方留言呀!
方法 2
使用 HTML 的 <img> 标签
<img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width = "200" height = "200"/>
![](https://img-blog.csdnimg.cn/20200323204819408.jpg)
img 的高度、宽度除了使用像素单位,还可以使用百分比。
<img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="40%" />
![](https://img-blog.csdnimg.cn/20200323204819408.jpg)
粘贴即用
<img src="图片地址" width = "200" height = "200" alt="图片名称" align=center />
<img src="图片地址" width="40%" />
对齐方式
修改对齐方式只要在 <img> 标签上加个 div即可。
<div align="center">
<img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width = "200" height = "200" />
<div>
![图片名称](https://img-blog.csdnimg.cn/20200323204819408.jpg)
align参数:
- center 居中
- right 左对齐
- left 右对齐
图片并排
方法 1
个人比较推荐
此方法!!!
在每一张图的末尾加空个就会留一个空白。
不加空格则入下图所示。
👉注意:不能换行
![描述](https://img-blog.csdnimg.cn/20200323204819408.jpg =100x)![描述](https://img-blog.csdnimg.cn/20200323204819408.jpg =100x)![描述](https://img-blog.csdnimg.cn/20200323204819408.jpg =100x)
方法 2
- 同上加空格留空白
- 不加直接“连体”
<center>
<img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="100"/>
<img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="100"/>
<img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="100"/>
</center>
![](https://img-blog.csdnimg.cn/20200323204819408.jpg)
![](https://img-blog.csdnimg.cn/20200323204819408.jpg)
![](https://img-blog.csdnimg.cn/20200323204819408.jpg)
方法 3
在表格里实现多张图片并排
<table>
<tr>
<td><center> <img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="200"/></center></td>
<td><center> <img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="200"/></center></td>
<td><center> <img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="200"/></center></td>
</tr>
<tr>
<td><center> <img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="200"/></center></td>
<td><center> <img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="200"/></center></td>
<td><center> <img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="200"/></center></td>
</tr>
<tr>
<td><center> <img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="200"/></center></td>
<td><center> <img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="200"/></center></td>
<td><center> <img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="200"/></center></td>
</tr>
</table>
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
粘贴即用
对齐方式
<div align="center">
<img src="图片地址" width = "200"/>
<div>
图片并排
![描述](图片地址)![描述](图片地址)![描述](图片地址)
<center>
<img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="100"/>
<img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="100"/>
<img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="100"/>
</center>
表格并排
<table>
<tr>
<td><center> <img src="图片地址" width="200"/></center></td>
<td><center> <img src="图片地址" width="200"/></center></td>
<td><center> <img src="图片地址" width="200"/></center></td>
</tr>
</table>
参考地址:
https://blog.csdn.net/qq_21808961/article/details/80666589
https://www.zhihu.com/question/23378396
https://blog.csdn.net/qq_33826564/article/details/81303230