寫博客時的“奇技淫巧”——【修改圖片大小、對齊、並排】

關於圖片的使用

文本主要介紹：修改圖片大小或比例、圖片對齊方式、圖片的並排以及使用心得。

前言

  我們在寫博客的時候經常會插入圖片來使博客一目瞭然。但是圖片的大小、對齊方式往往會影響美觀。
圖片太大，顯得突兀；圖片太小，又顯格格不入。下面跟大家說說我所收集的一些關於圖片的使用技巧。

圖片語法

• 插入圖片的語法如下。
  

• 語法說明如下。

  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