【问题标题】：Is it possible to add border to image in GitHub markdown?是否可以在 GitHub markdown 中为图像添加边框？
【发布时间】：2016-09-17 20:58:29
【问题描述】：

我需要为 GitHub README.md 文件中的图像添加边框。这就是应该嵌入图像的方式：

![GitHub Logo](/images/logo.png)

我尝试用表格包裹图像：

|--------------------------------|
|![GitHub Logo](/images/logo.png)|

但是不能创建没有表头的表格。

我也尝试将图像包含为 html 标签：

<img src="/images/logo.png" style="border: 1px solid black" />

但没有成功。有没有办法做到这一点？

【问题讨论】：

仅仅使用降价可能不再可能了，您曾经能够在右括号之前添加诸如“`` | width=100``”之类的内容。
如果您在浏览器中检查 <img> 元素，您会看到 GitHub 将您的 style="" 替换为 style="max-width:100%;"。从而阻止您在 img 标签上放置 style="" 属性。

标签： html github markdown

【解决方案1】：

它很hacky，并不总是很漂亮，但是用<kbd>标签包围图像。

之前

<img src="https://i.stack.imgur.com/CtiyS.png">

之后

<kbd>
  <img src="https://i.stack.imgur.com/CtiyS.png">
</kbd>

它呈现如下：

围绕 markdown 图像语法可能不适用于某些 markdown 实现。如果以下不起作用

<kbd>![alt-text](https://example.com/image.png)</kbd>

尝试将图像嵌入为 HTML <img> 标记

<kbd><img src="https://example.com/image.png" /></kbd>

【讨论】：

“例如，在 GitHub 上，以下内容只会呈现为看起来很奇怪的文本”——这使得这个答案完全无关紧要，因为这个问题正是关于 GitHub 的。
@skalee 答案适用于 github 就好了。我只是说你需要使用正确的语法。
它确实可以在 github 上运行。不过，您需要关闭 img 标签。
看起来真不错。只考虑了一个简单的边框，以一些圆形边缘、高程效果和图像周围的阴影返回。
这在我们的 gitlab 实例上对我有用。 +1

【解决方案2】：

您可以使用<table>标签创建没有表头的表格。

<table><tr><td>
    <img src="/images/logo.png" />
</td></tr></table>

【讨论】：

有没有办法去除表格单元格内的填充？

【解决方案3】：

在 StackExchange 网站上，我喜欢为此目的使用“引用”标记 >。

例如：

> [![screenshot][1]][1]

  [1]: https://i.stack.imgur.com/CtiyS.png

呈现如下：

【讨论】：

这是使屏幕截图脱颖而出的好方法。谢谢。

【解决方案4】：

另一种方法是自己在图像编辑工具中提供边框并上传。

【讨论】：

【解决方案5】：

另一种方法是使用表格的第一个单元格。

代码：

|![pictureAliasName](pathOfPicture/pictureName.png)|
-

- 字符在代码中很重要。

你可以看到结果here。

【讨论】：

【解决方案6】：

我在 Gitlab 上这样做的方式是使用这样的表格：

| ![Alt name of image](/path-to-image.png) |
| ------ |

【讨论】：

【解决方案7】：

我经常在 GitHub 评论中这样做。也许需要一些换行符。

# Added at 2021/05/24

// No end tag
<kbd> ![image_alt](image_path)

# Added at 2020/09/14

| ![...)
|-

label_text
|-
![...)

| ![...a) | ![...b)| ![...c)
|-|-|-

# Before / After

Before | After
-|-
![...a) | ![...b)

# with Background color

||
|-
||
![...)

【讨论】：