css - 带有 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 不是一种选择。 marked 与 sanitize 一起使用标志以转义任何 HTML。我希望有一个 CSS 解决方案或其他一些聪明的机制。

Answer 1

要通过 Markdown 完成此操作，只需使用原始 HTML。 rules状态(粗体添加):

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.

因此，使用 <img>带有 srcset 的标签属性和/或 width和 height就像在 HTML 中一样。 Markdown 将按原样传递它们。