写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】

关于图片的使用

文本主要介绍：修改图片大小或比例、图片对齐方式、图片的并排以及使用心得。

前言

  我们在写博客的时候经常会插入图片来使博客一目了然。但是图片的大小、对齐方式往往会影响美观。
图片太大，显得突兀；图片太小，又显格格不入。下面跟大家说说我所收集的一些关于图片的使用技巧。

图片语法

• 插入图片的语法如下。
  

• 语法说明如下。

  1. 图片代替文字在图片无法正常显示时会比较有用，正常情况下可以为空。
  2. 图片地址可以死本地图片的路径也可以是网络图片的地址。
  3. 本地图片相对路径和绝对路径两种方式。

---

修改大小

方法 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"/>

---

img 的高度、宽度除了使用像素单位，还可以使用百分比。

<img src="https://img-blog.csdnimg.cn/20200323204819408.jpg" width="40%" />

粘贴即用

<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>

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>

方法 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