3

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

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

img {
  width: 33.33%;
}

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

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

4

3 回答 3

0

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

例如，我可以像这样创建 Markdown 图像：

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

然后我可以使用属性选择器将宽度从 1200px 设置为 400px，使其对于 adevicePixelRatio为 3 的设备非常清晰：

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

这意味着所有重要示例的逻辑宽度为 400 像素。如果我给它提供一个 1200 像素的图像，标准 DPI 设备的图像下载速度会变慢，但否则会很好。

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

于 2017-09-21T01:47:01.653 回答
0

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

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

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

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

于 2017-09-20T17:12:28.940 回答
-1

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

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

  }
}
于 2017-09-20T05:43:30.150 回答