带有 HiDPI/Retina 图像的 Markdown

Question

如何使用从 Markdown 生成的 HTML 在 HiDPI 显示器上显示图像，以便以高分辨率显示图像。通常，我会创建带有srcset 属性的<img> 标签，或者在每个图像上适当地设置width 和height，或者使用媒体查询。但是，Markdown 图像的结果只允许 alt 属性。具体来说，我使用的是marked 库（我无法控制）。

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

img {
  width: 33.33%;
}

更好的办法是让浏览器根据设备的devicePixelRatio 下载不同的图像。

使用 HTML 不是一种选择。标记与sanitize 标志一起使用以转义任何HTML。我希望有一个 CSS 解决方案或其他一些聪明的机制。

Answer 1

要通过 Markdown 完成此操作，只需使用原始 HTML。 rules 状态（加粗）：

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

对于 Markdown 语法未涵盖的任何标记，您只需使用 HTML 本身即可。 无需为其添加前缀或定界以表明您正在从 Markdown 切换到 HTML；你只需要使用标签。

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

Answer 2

我能够处理来自 Markdown 的 HiDPI 图像的一种方法是利用 title 属性。图片标题可以在语义上有意义，并为 CSS 提供信息以使用 attribute selectors 有效调整图片大小。

例如，我可以像这样创建 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 设备的图像下载速度会较慢，但否则会很好。

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

Answer 3

您可以考虑设备宽度和设备像素比。所以我们可以解决这个问题。

/* Large Monitors devices (large desktops, 1920px and up)*/
@media only screen and (max-width: 1920px) {

  .logo {
    width: 160px;
    height: 109px;
    background-image: url("/img/1920px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo {
      width: 160px;
      height: 109px;
      background-image: url("/img/1920px/logo/logo-2x.png");
    }

  }

}

/* Extra large devic
es (large desktops, 1280px and up)*/
@media only screen and (max-width: 1280px) {

  .logo {
    width: 120px;
    height: 82px;
    background-image: url("/img/1280px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo{
      width: 160px;
      height: 109px;
      background-image: url("/img/1280px/logo/logo-2x.png");
    }

  }
}

/* Large devices (desktops, 960px and up)*/
@media only screen and (max-width: 960px) {

  .logo{
    width: 100px;
    height: 68px;
    background-image: url("/img/960px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo{
      width: 160px;
      height: 109px;
      background-image: url("/img/960px/logo/logo-2x.png");
    }

  }

}

/* Medium devices (tablets, 640px and up)*/
@media only screen and (max-width: 640px) {

  .logo{
    width: 78px;
    height: 42px;
    background-image: url("/img/640px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo{
      width: 160px;
      height: 109px;
      background-image: url("/img/640px/logo/logo-2x.png");
    }

  }
}


/* Small devices (landscape phones, 320px and up)*/
@media only screen and (max-width: 320px) {

  .logo{
    width: 78px;
    height: 42px;
    background-image: url("/img/320px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo{
      width: 160px;
      height: 109px;
      background-image: url("/img/320px/logo/logo-2x.png");
    }

  }
}