给 Markdown 里的图片增加样式

在 markdown 里添加图片很容易，用这个语法即可：

![alt](/path/to/image "title")

但是如果图片需要一些特殊样式，就不太好搞。比如前两天，老板觉得博文中的二维码太大，不好看，让我改小点。我一开始只知道可以用 HTML 来做，因为 Markdown 内建支持所有 HTML，但总觉得不够优雅，尤其是，不知道怎么要求将来写博客的人都用 HTML 来写。

于是 Google 之，找到这篇文章：How to Style Images With Markdown，写得非常好，列举了很多添加样式的方法，尤其是使用 #hash + CSS 选择器的方法，很有想象力，推荐给大家。

首先，在 Markdown 里，给图片的 URL 添加 hash。这个动作并不会造成任何实质性的影响。

![alt](/path/to/image#thumbnail)

然后，在 CSS 里，定义“src 里包含字符串 #thumbnail”的规则即可：

img[src*="#thumbnail"] {
  max-width: 10rem;
}

[attr*=val] 选择器的意思是 attr 属性里包含 val 字符串。这里用 [src$="#thumbnail"] 效果是一样的。如果你想了解所有 CSS 属性选择器，还是推荐看 MDN 文档。