在Markdown中更改图像大小

我刚开始接触Markdown。我喜欢它，但有一件事困扰着我：如何使用Markdown更改图像的大小？

文档仅为图像提供以下建议：

![drawing](drawing.jpg)

如果可能的话，我希望图片也居中。我问的是Markdown将军，而不仅仅是GitHub是如何做到的。

当前回答

如果更改初始标记对您来说不是一个选项，则此黑客可能会奏效：

newHtml = oldHtml.replace(/<img/g, '<img height="100"');

我使用它可以在发送电子邮件之前调整图像大小（因为Outlook忽略任何图像css样式）

其他回答

有添加类和css样式的方法

!〔pic〕〔logo〕｛.classname｝

然后在下面写下链接和css

[logo]: (picurl)

<style type="text/css">
    .classname{
        width: 200px;
    }
</style>

此处引用

如果更改初始标记对您来说不是一个选项，则此黑客可能会奏效：

newHtml = oldHtml.replace(/<img/g, '<img height="100"');

我使用它可以在发送电子邮件之前调整图像大小（因为Outlook忽略任何图像css样式）

如果您正在使用kramdown，可以执行以下操作：

{:.foo}
![drawing](drawing.jpg)

然后将其添加到自定义CSS中：

.foo {
  text-align: center;
  width: 100px;
}

通过纯向后兼容MD：

![<alt>](<imguri>#<w>x<h> "<title>")

其中w，h定义了要纵横适配的边界框，例如在Flutter包中https://pub.dev/packages/flutter_markdown

代码：https://github.com/flutter/packages/blob/9e8f5227ac14026c419f481ed1dfcb7b53961475/packages/flutter_markdown/lib/src/builder.dart#L473

重新考虑破坏兼容性的html解决方案，因为人们可能会使用本机/非html组件/应用程序来显示标记。

Tieme的答案在大多数情况下都是最好的。

在我的例子中，我使用pandoc将markdown转换为乳胶。HTML标记在这里不起作用。

我的解决方案是重新实现includegraphics

\let\maxincludegraphics\includegraphics
\renewcommand{\includegraphics}[1]{\maxincludegraphics[max width=\textwidth]{#1}}

类似于在转换为HTML后使用CSS。

推荐文章