在Markdown中更改图片大小

这个<img ... width="50%">标签在我的Github Readme.md文件中的确起到了作用。

但是我的实际问题是，图片在表格单元格内部，压缩了旁边单元格的文本。所以另一种解决方法是在Markdown表格中设置列宽，但这些解决方案似乎并不太符合我的“Markdown风格”。

最后，我通过在需要的旁边文本单元格中强制添加尽可能多的"& nbsp;"来解决了这两个问题。

希望这有所帮助。再见，谢谢大家。

如果我们只是像这样使用普通的HTML图像标签，它会工作，如果你使用Bootstrap进行样式设置。我在使用Jekyll制作的网站中使用了这个。

<img class="img-fluid" src="./img/face.jpg" alt="img-verification">

如果按照这个例子添加Bootstrap类，它可以正常工作。

如果您无法更改最初的Markdown，那么这个技巧可能适用：将"Original Answer"翻译成"最初的回答"。

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

我使用这个工具来在发送电子邮件之前调整图片大小（因为Outlook会忽略任何图片CSS样式）。

最初的回答：

我用这个来能够调整图片大小，然后再发送邮件（因为Outlook会忽略任何图片CSS样式）。

这将起作用。

<style>
img{width: 50%;}
#foo {color: red;}
</style>

<p id="foo">foo</p>

<p style="color: blue">bar</p>

对于IntelliJ IDEA用户，请参考Markdown Navigator插件。
预览可以呈现图像、徽章、HTML等。

如果您正在使用markdown-it，首先需要启用HTML渲染：

const md = require("markdown-it")({
  html: true,
});

然后你可以在你的 .md 文件中使用：

<img src="" alt="drawing" width="100%" height="200"/>

我会在图像编辑器中编辑图像 - 水平放大图像，因此当渲染器将其调整为页面宽度时，它会在垂直方向上变小。

所以，只需添加一些透明的左右边距即可。

Tieme的答案对于大多数情况来说是最好的。

在我的情况下，我正在使用pandoc将markdown转换为latex。 HTML标签在这里不起作用。

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

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

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

嗯，我们中有些人不喜欢警告。这些警告来自Markdown linting。 所以你需要做两件事：

1. 使用内联HTML：

• 不要使用： ![drawing](drawing.jpg)

• 而要使用： <img src="Assets/icon.png" width=250 height=200>

• 250和200分别是您图片的首选宽度和高度！您可以选择只使用一个属性并忽略另一个。

2. 减少警告：

• 在项目的根目录下创建一个.markdownlint.json文件，内容如下：

{
    "MD033": false,
    "MD013": false
}

为了抑制警告，请在此处添加您想要抑制的其他警告！

您可以这样在图片结尾设置大小：

![image.png](source **=600x400**)