在GitHub的Markdown中，是否可以为图像添加边框？

Question

我需要在GitHub README.md文件中的图片上添加边框。以下是图片嵌入的方式:

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

我尝试使用表格来包裹图像：

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

但是没有表头是无法创建表格的。

我还尝试过将图像包含在 HTML 标签中：

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

但是一直没有成功。有什么方法可以做到这一点吗？

- madox2

---

可能不再只使用Markdown实现，以前可以在右括号之前添加类似" | width=100"的内容。 - tgharold

如果你在浏览器中检查 <img> 元素，你会发现 GitHub 用 style="max-width:100%;" 替换了你的 style=""。这样就防止你在 img 标签上放置 style="" 属性。 - tgharold

Answer 1

虽然不太完美，看起来有些丑陋，但是您可以用<kbd>标签将图片包围起来。

翻译内容

<img src="https://istack.dev59.com/CtiyS.webp">

之后

<kbd>
  <img src="https://istack.dev59.com/CtiyS.webp">
</kbd>

它的渲染结果如下：

---

对于一些 Markdown 实现，包裹 markdown 图像语法可能无效。 如果以下方法不起作用

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

尝试将图片作为 HTML 的 <img> 标签嵌入。

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

- kdbanman

---

例如在GitHub上，以下内容只会呈现为奇怪的文本，这使得此回答完全无关紧要，因为这个问题正是关于GitHub的。 - skalee

@skalee 的回答对于 Github 完全有效。我想说的是，你需要使用正确的语法。 - kdbanman

它在 Github 上可以使用。不过，你需要关闭 img 标签。 - Dionys

看起来非常不错。我只是想要一个简单的边框，加上一些圆角、高程效果和图像周围的阴影。 - Sunit Gautam

这对我们的GitLab实例有效。+1 - TxAG98

Answer 2

在StackExchange网站上，我喜欢使用“引用”标记>来达到这个目的。

例如：

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

  [1]: https://istack.dev59.com/CtiyS.webp

呈现效果如下：

- daveloyall

---

这是一个不错、简单的方法使截图更加突出，谢谢。 - Richard

Answer 3

我在GitLab上做这件事的方式是使用表格，像这样：

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

这类似于 @kesadae11 的答案，但为了使其在 GitLab 中可用，需要使用额外的管道字符。

- Leopold Kristjansson

---

这对我来说也适用于VSCode的Markdown预览，而@kesadae11的答案则不行。 - s6mike

Answer 4

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

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

- gonsee

---

有没有办法去掉表格单元格内部的填充？ - Harry M

Answer 5

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

代码：

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

-字符在代码中很重要。

你可以在这里看到结果。

- kesadae11

Answer 6

我在GitHub评论中经常这样做。 （图片可以是HTML标签或者markdown，所以可能需要一些换行。）

<!-- No end tag -->
<kbd> image

| image
|-

label_text
|-
image

image | image | image
-|-|-

<!-- with `kbd` for White background images -->
<kbd> image | <kbd> image | <kbd> image
-|-|-

Before | After
-|-
image | image

<!-- Template with details tag -->
<details>
<summary>Screenshots</summary>

Before | After
-|-
image | image
</details>

<!-- Vertical alignment -->
<table>
<tr valign="top">
<td>

image
<td>

![...b)
<tr valign="top">
<td>

image
<td>

image
</table>

- KABA

Answer 7

我创建了一个名为"readme.md"的文件，其中包含使用RGB系统显示不同颜色及其代码的图表。为了突出显示白色，我在其周围添加了一个边框。

这是我使用的解决方案：

<img style="border: .5px solid;" src="https://placehold.co/100x50/FFFFFF/FFFFFF">

- RAWdevX21

Answer 8

<img src='src' alt="des" style="border: 2px solid  gray; border-radius:15px">

享受编码的乐趣 :)

- Rakshith R Salian

---

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community

Answer 9

我使用了以下代码，它对我来说完全有效

<img src="image-20220820124005006.png" alt="image-20220820124005006" style="border: 3px solid red" />

- nzpinner

Answer 10

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

- blackcatweb