带有 HiDPI/Retina 图像的 Markdown

Question

如何使用 Markdown 生成的 HTML 在 HiDPI 显示器上显示图像，以便以高分辨率显示图像。通常，我会创建带有

<img>

属性的

srcset

标签，或在每个图像上适当设置

width

和

height

或使用媒体查询。但是，Markdown 图像的结果仅允许

alt

属性。具体来说，我正在使用 marked 库（我对此无法控制）。

我确实可以完全控制 CSS。在 CSS 中，有没有办法至少使所有图像的逻辑像素宽度比物理像素宽度小 1/3？这样我就可以要求 Markdown 中引用的所有图像都是 3x。有这么简单吗？

img {
  width: 33.33%;
}

更好的方法是让浏览器根据设备的

devicePixelRatio

下载不同的图像。

使用 HTML 不是一种选择。标记与

sanitize

标志一起使用来转义任何 HTML。我希望有一个 CSS 解决方案或其他一些聪明的机制。

Answer 1

要通过 Markdown 实现此目的，只需使用原始 HTML。 rules 状态（粗体添加）：

Markdown 并不能替代 HTML，甚至不能替代 HTML。它的语法非常小，仅对应于 HTML 标签的一个非常小的子集。我们的想法并不是创建一种可以更轻松地插入 HTML 标签的语法。在我看来，HTML 标签已经很容易插入了。 Markdown 的想法是让阅读、写作和编辑散文变得容易。 HTML 是一种发布格式； Markdown 是一种“书写”格式。因此，Markdown 的格式化语法仅解决可以用纯文本传达的问题。

对于 Markdown 语法未涵盖的任何标记，您只需使用 HTML 本身即可。

无需在其前面添加前缀或对其进行定界以表明您正在从 Markdown 切换到 HTML；您只需使用标签即可。

因此，请使用带有

<img>

属性和/或

srcset

和

width

的

height

标签，就像在 HTML 中一样。 Markdown 将按原样传递它们。

Answer 2

title

属性。图像标题可以具有语义意义，并向 CSS 提供信息，以便使用

 属性选择器 

有效调整图像大小。 作为示例，我可以创建这样的 Markdown 图像：

![](http://images.ucode.com/logo_1200.png "Important example")

然后我可以使用属性选择器将宽度从 1200px 设置为 400px，使其对于 

devicePixelRatio

为 3 的设备来说非常清晰：

img[title~="important" i][title~="example" i] {
  width: 400px;
}

这意味着所有重要示例的“逻辑宽度”均为 400 像素。如果我向它提供 1200 像素图像，标准 DPI 设备的图像下载速度会较慢，但其他方面都很好。

理想情况下，有一个解决方案，我可以为不同的 devicePixelRatio 提供多个图像。不过，这至少目前已经足够了。

某些平台允许按百分比缩放指定的图像。

Answer 3

![image|512x128](file.png)

之后：

![image|512x128, 50%](file.png)

此外，您还可以在

这里

和

这里

查看其他语法示例。但具体效果取决于平台的 Markdown 实现。 可以考虑设备宽度和设备像素比。所以我们可以解决这个问题。

Answer 4