如何使用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解决方案或其他一些聪明的机制。
答案 0 :(得分：0)
要通过Markdown完成此操作，只需使用原始HTML即可。 rules状态（粗体添加）：
Markdown不是HTML的替代品，甚至不接近它。它的语法非常小，仅对应于HTML标签的一小部分。我们的想法不是创建一种语法，以便更容易插入HTML标记。在我看来，HTML标签已经很容易插入。 Markdown的想法是让阅读，编写和编辑散文变得容易。 HTML是发布格式; Markdown是一种写作格式。因此，Markdown的格式化语法仅解决可以用纯文本传达的问题。
对于Markdown语法未涵盖的任何标记，您只需使用HTML本身。无需在其前面加上或分隔它以表明您正在从Markdown切换到HTML;你只需使用标签。
因此，使用带有<img>属性和/或srcset和width的{{1}}代码，就像使用HTML一样。 Markdown将按原样传递它们。
答案 1 :(得分：0)
我能够使用来自Markdown的HiDPI图像的一种方法是使用title属性。图像标题可以在语义上有意义，并为CSS提供信息，以使用attribute selectors有效地调整图像大小。
举个例子，我可以像这样创建一个Markdown图像：
然后我可以使用属性选择器将宽度从1200px设置为400px，使devicePixelRatio为3的设备非常清晰：
img[title~="important" i][title~="example" i] {
width: 400px;
}
对于所有重要的示例而言，其具有400像素的逻辑宽度。如果我输入一个1200像素的图像，标准DPI设备的图像下载速度会慢一些，否则会很好。
理想情况下，我可以为不同的devicePixelRatio提供多个图像的解决方案。但是，现在至少这已经足够好了。
答案 2 :(得分：-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");
}
}
}