Markdown与HiDPI/Retina图片

Question

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

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

img {
  width: 33.33%;
}

更好的方式是让浏览器根据设备的devicePixelRatio下载不同的图片。

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

- at.

Answer 1

要通过Markdown实现这一点，只需使用原始的HTML代码。规则说明（加粗）：

Markdown并不是HTML的替代品，甚至不能与之相提并论。其语法非常简单，仅对HTML标签的一个非常小的子集进行了处理。其目的不是创建一个使插入HTML标签更容易的语法。在我看来，插入HTML标签已经很容易了。Markdown的目的是使散文易于阅读、书写和编辑。HTML是一种发布格式；Markdown是一种编写格式。因此，Markdown的格式化语法仅涉及可以用纯文本传达的问题。

对于任何未被Markdown语法覆盖的标记，您只需使用HTML本身即可。无需附加前缀或分隔符来指示您正在从Markdown切换到HTML;您只需使用标记即可。

因此，请像在HTML中一样使用带有srcset属性和/或宽度和高度的<img>标签。Markdown将直接将它们传递。

- Waylan

---

我应该注意到 HTML 不被允许（使用 marked 的 sanitize 选项标志）。 - at.

啊，那是Markdown提供的唯一机制。如果原始HTML不可行，则无法使用标准Markdown完成。猜测您需要使用CSS解决方案。唯一的例外可能是某种扩展/插件，它添加了非标准行为，但我对marked不够熟悉，不知道是否存在这样的东西。 - Waylan

Answer 2

我处理Markdown中的HiDPI图像的一种方法是利用title属性。图像标题可以具有语义意义，并向CSS提供信息，以使用属性选择器有效地调整图像大小。

例如，我可以创建一个Markdown图像，如下所示：

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

然后我可以使用属性选择器将宽度从1200像素设置为400像素，使其在设备像素比为3的设备上非常清晰：

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

这意味着所有重要的示例都应该有一个逻辑宽度为400像素。如果我提供了一个1200像素的图像，标准DPI设备将会下载速度较慢，但其他方面都没问题。

理想情况下，我可以为不同的devicePixelRatio提供多个图像的解决方案。然而，现在至少已经足够好了。

- at.

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");
    }

  }
}

- sajee

---

我不理解这个答案。你为logo类提供了一堆媒体查询。Markdown不允许为图像设置类，至少我不知道。 - at.