hexo插入图片及控制大小

前言

首先说下hexo插入图片的方式有哪些，hexo默认集成了markdown语法，这里我们就markdown里显示图片的方式引入html方法,三种方法有优有劣，关键看自己的习惯了

• 第一种是直接引用markdown插入
• 第二种是使用html来引用插入
• 第三种是之前有讲到过插件引用

直接引用markdown插入

• 首先是直接引用的方法需要在images目录里放入需要引入的图片

  ![lena](https://alexcld.com/images/pengyuyan.jpg)

• 我这里就直接引用之前的图片了，图片链接自己可以在网上找，
• 本地图片的话可以直接使用路径来引用
• 这种方法可以是可以，有点小缺点：图片就会靠在左侧，大小也不由自己决定

使用html方法引入

• 第二种就是使用html来引用插入的图片

  <img src="https://alexcld.com/images/pengyuyan.jpg" width=256 height=256 />

• 固定图片大小：width=256,height=256设置的是显示图像的尺寸，src后面接的就是图像对象
• 还可以使用百分比的方式来给width,height传参

  <img src="https://alexcld.com/images/pengyuyan.jpg" width="50%" height="50%" />

• 其中width和height后面的50%就是根据窗口的大小以一定的比例显示图片。值得一说的是，这种按照百分比显示方法，是以width方向为准，并保持纵横比的，换句话说，把设置width的部分去掉，height的值改为任意百分比，显示的图像都是原图大小（个人觉得这根博客窗口有关，毕竟现实截面的宽度相对是固定的，而高度/长度却是变化着的）。因此用此方法的时候，可以把height设置缺省
• 如：

  <img src="https://alexcld.com/images/pengyuyan.jpg" height="5%" />

• 如果想给图像加个标注，可以这么做：

  <center>
  <img src="https://alexcld.com/images/pengyuyan.jpg" width="25%" height="25%" />
  Figure 1. xx
  </center>

• 如果想让图和标注间距离增大，可以这么做：

  <center>
  <img src="https://alexcld.com/images/pengyuyan.jpg" width="25%" height="25%" />
  $ $
  Figure 1. xx
  </center>

  第三种就是是用插件的方式来进行引用图片

  具体的细节我这里就不再多讲了，可以看下之前的文章：插件的方式引入图片
  效果图的话可以看这里：效果图