在 markdown 中插入图片的时候，一般情况下是靠左侧的，在 markdown 也可以使用 HTML 语法进行图片的插入，来方便控制图片的大小和位置。
图片大小的设置
在 markdown 中使用 img 标签来插入图片，并用 height 、width 对图片的大小进行控制，可以指定图片的大小或者相对于原始图像的百分比。
<img src="images/dinosaur.jpg"
alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
width="400"
height="341">
<img src="图片路径" alt="图片名称" height="50%" width="50%">
<img src="图片路径" alt="图片名称" height="100px" width="400px">
原始图片：
重新设置图片的大小：
<img src="图片路径" height="50%" width="50%">
图片位置的设置
自己是用 Typora 编写的 markdown，在里面能正常显示图片的位置，但是通过 Jekyll 加载到网页里面的时候，图片又自动靠在了左侧，在网上看到一个简便的方法可以将图片设置居中。通过 center 标签来控制。或者在外面包围 div 标签( <div align="center"> )
<center>
<img src="图片路径" height="50%" width="50%">
</center>
<div align="center">
<img src="图片路径" height="300" width="200">
</div>
显示图片居中：
图片标题
类似于超链接，你可以给图片增加title属性来提供需要更进一步的支持信息。在我们的例子中，可以这样做：
<img src="images/dinosaur.jpg"
alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
width="400"
height="341"
title="A T-Rex on display in the Manchester University Museum">
这会给我们一个鼠标悬停提示，看起来就像链接标题：
图片标题并不必须要包含有意义的信息，通常来说，将这样的支持信息放到主要文本中而不是附着于图片会更好。不过，在有些环境中这样做更有用，比如当没有空间显示提示时，也就是在图片栏中。
备选文本
属性是 alt ，它的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况。
<img src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth">
测试alt 属性最简单的方式就是故意拼错图片文件名，这样浏览器就无法找到该图片从而显示备选的文本。如果我们将上例的图片文件名改为 dinosooooor.jpg，浏览器就不能显示图片，而显示：
通过为图片搭配说明文字的方式来解说图片
<div class="figure">
<img src="/images/dinosaur_small.jpg"
alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
width="400"
height="341">
<p>曼彻斯特大学博物馆展出的一只霸王龙的化石</p>
</div>
有一个更好的做法是使用 HTML5 的 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure) 和 [ 元素，它正是为此而被创造出来的：为图片提供一个语义容器，在标题和图片之间建立清晰的关联。我们之前的例子可以重写为:
<figure>
<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
width="400"
height="341">
<figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>
这个<figcaption>元素 告诉浏览器和其他辅助的技术工具这段说明文字描述了<figure> 元素的内容.
注意<figure> 里不一定要是一张图片，只要是一个这样的独立内容单元：
- 用简洁、易懂的方式表达意图。
- 可以置于页面线性流的某处。
- 为主要内容提供重要的补充说明。
<figure> 可以是几张图片、一段代码、音视频、方程、表格或别的。