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不是HTML的替代品，甚至不接近它。它的语法非常小，仅对应于HTML标签的一小部分。我们的想法不是创建一种语法，以便更容易插入HTML标记。在我看来，HTML标签已经很容易插入。 Markdown的想法是让阅读，编写和编辑散文变得容易。 HTML是发布格式; Markdown是一种写作格式。因此，Markdown的格式化语法仅解决可以用纯文本传达的问题。

对于Markdown语法未涵盖的任何标记，您只需使用HTML本身。无需在其前面加上或分隔它以表明您正在从Markdown切换到HTML;你只需使用标签。

因此，使用带有<img>属性和/或srcset和width的{{1}}代码，就像使用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设备的图像下载速度会慢一些，否则会很好。

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

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

  }
}

使用HiDPI / Retina图像进行降价

3 个答案: