Markdown是一种方便的、以html为中心的简写语法，用于格式化文档和博客文章等内容，但它缺乏图像格式化(如对齐和大小调整)的基本功能。这篇文章介绍了多种使用Markdown来格式化图像的方法，从蛮力到专有语法扩展、不明智的修改，以及介于两者之间的各种方法。
这是你如何插入一个图像在Markdown:
代码语言：javascript复制也就是说，Markdown允许您在HTML中使用src、alt和title属性指定img标记。标准的Markdown并没有提供更多的功能，但是网站通常需要宽度、高度和CSS类属性。
本文的其余部分致力于解决这些缺点的各种方法。为了激发这个讨论，我将使用一个应该以较小尺寸显示的大图像示例。
例如,
代码语言：javascript复制
我不会向您展示如何添加对齐、浮动或浮动—但是我的大小调整示例就足够了，因为一旦您知道如何更改图像的大小，您就会知道如何做其他事情。我将首先向您展示最好的解决方案，最后介绍不需要的解决方案。
使用标准的HTML
Markdown最初是为HTML创作而设计的，它允许在任何地方、任何时间使用原始HTML。因此，最直接的解决方案是简单地使用HTML与所需的属性:
代码语言：javascript复制<img src="/media/2018/08/kitten.jpg" alt="Kitten"
title="A cute kitten" width="150" height="100" />
这样做是有效的，并且为您提供了对结果HTML的无限制控制。但是Markdown因其简单而吸引人，不像HTML那样充斥着杂乱的标记。因此，许多人不喜欢这个解决方案，因为它违背了Markdown的目的。
使用CSS和特殊的URL参数
通常，对图像进行样式化的最好方法是使用CSS。现代CSS语法可以根据元素的属性值来选择元素，所以应用CSS规则的一种方法是将额外的信息编码到Markdown的标准src属性中。在本节中，我将讨论这些可能性。稍后，我还将向您展示一些不需要的与css相关的技术。
URL中有两个地方可以重载以携带CSS可以使用的信息:URL片段和URL查询参数。
URL片段是在#字符之后的部分。当它在网站的URL中使用时，它可以滚动页面，将所需的部分内容显示到视图中，但是您也可以将其添加到图像中。当您这样做时，它实际上对浏览器来说什么也不做，而且一般用户也不会在浏览器的地址栏中看到它。但它对我们的造型需求很有用。在这里，我们将添加一个缩略图片段到图像的源URL:
代码语言：javascript复制此信息完全保存在客户端，浏览器在请求内容时不会将这部分URL传输到服务器。但是，CSS和JavaScript可以读取片段并使用它。下面是如何编写一个CSS选择器，将匹配的图像与这个“缩略图”信息在URL:
代码语言：javascript复制img[src*="#thumbnail"] {
width:150px;
height:100px;
}img[src*=”#thumbnail”] {
width:150px;
height:100px;
}如果#thumbnail出现在src属性中的任何位置，则*=选择器语法匹配。您还可以使用$=”#thumbnail”将匹配锚定到URL的结尾。
这只允许将单个值编码到URL中，但是您可以修改此技术以添加多个值。CSS还有一个~=选择器，如果指定的值恰好以空格分隔的“word”形式出现在属性值中，它就会匹配。这让你模拟组合多个“类”在URL片段:
代码语言：javascript复制现在你可以针对这些伪“类”名称从CSS:
代码语言：javascript复制img[src~="thumbnail"] {
width:150px;
height:100px;
}
img[src~="bordered"] {
border: 1px solid black;
}img[src~=”thumbnail”] {
width:150px;
height:100px;
}
img[src~=”bordered”] {
border: 1px solid black;
}将空格编码为URL的等效方法是使用 URL编码，但是我发现这在我在这里展示的Blackfriday Markdown处理器中不起作用1:
当然，您可以选择不同的方法来构造值，例如使用key=value语法或任何适合您目的的方法。根据您的喜好，可以使用任何适合您的CSS选择器语法。
另一种方法是使用普通的URL查询参数，即问号后面的部分
