在Markdown中更改图像大小-Java 学习之路

594

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

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

![drawing](drawing.jpg)

如果可能的话，我希望图片也能居中 . 我要求一般降价，而不仅仅是github如何做到这一点 .

17 回答

325
也许这最近发生了变化，但Kramdown docs显示了一个简单的解决方案 .

来自文档
```
Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}.

And here is a referenced ![smile]

[smile]: smile.png
{: height="36px" width="36px"}
```
与Jekyll和Kramdown一起在github上运行 .
回复于 2024-04-28T19:34:39+08:00

只需使用：

<img src="Assets/icon.png" width="200">

代替：

![](Assets/icon.png)

回复于 2024-04-28T19:34:39+08:00

2
您可以使用这个以及kramdown：
```
markdown
![drawing](drawing.jpg)   
{:.some-css-class style="width: 200px"}
```
要么
```
markdown
![drawing](drawing.jpg)   
{:.some-css-class width="200"}
```
这样，您可以直接将任意属性添加到最后一个html元素 . 要添加类，可以使用快捷方式 .class.secondclass .
回复于 2024-04-28T19:34:39+08:00
0

我知道这个答案有点具体，但它可能会帮助其他有需要的人 .

使用Imgur service上传许多照片时，您可以使用the API detailed here来更改照片的大小 .

在GitHub发布评论中上传照片时，它将通过Imgur添加，因此如果照片非常大，这将有很大帮助 .

基本上，不是http://i.imgur.com/12345.jpg，而是将http://i.imgur.com/12345m.jpg用于中等大小的图像 .

回复于 2024-04-28T19:34:39+08:00
9
如果您正在为PanDoc编写MarkDown，则可以执行以下操作：
```
![drawing](drawing.jpg){ width=50% }
```
这会将 style="width: 50%;" 添加到HTML <img> 标记中，或者将 [width=0.5\textwidth] 添加到LaTeX中的 \includegraphics .

资料来源：http://pandoc.org/MANUAL.html#extension-link_attributes
回复于 2024-04-28T19:34:39+08:00
5
如果你是using kramdown，你可以这样做：
```
{:.foo}
![drawing](drawing.jpg)
```
然后将其添加到your Custom CSS：
```
.foo {
  text-align: center;
  width: 100px;
}
```
回复于 2024-04-28T19:34:39+08:00
89

在源URL中添加相对尺寸将在大多数Markdown渲染器中呈现 .

我们在Corilla中实现了这一点，因为我认为该模式遵循现有工作流程的期望而不会促使用户依赖基本HTML . 如果您最喜欢的工具不值得提出功能请求't follow a similar pattern it' .

Example of syntax:

![a-kitten.jpg](//corilla.com/a-kitten-2xU3C2.jpg =200x200)

Example of kitten:

回复于 2024-04-28T19:34:39+08:00
43
对于R-Markdown，上述两种解决方案都不适合我，所以我转向常规的LaTeX语法，这很好用 .
```
\begin{figure}
 \includegraphics[width=300pt, height = 125 pt]{drawing.jpg}
\end{figure}
```
然后你可以使用例如 \begin{center} 语句使图像居中 .
回复于 2024-04-28T19:34:39+08:00
231
有添加类和CSS样式的方法

![pic][logo]{.classname}

然后记下下面的链接和CSS
```
[logo]: (picurl)

<style type="text/css">
    .classname{
        width: 200px;
    }
</style>
```
Reference Here
回复于 2024-04-28T19:34:39+08:00
14
这里接受的答案不适用于我迄今为止使用的应用程序中的任何Markdown编辑器，如Ghost，Stackedit.io或甚至Stack Overflow编辑器 . 我找到了一个解决方法here in the StackEdit.io issue tracker .

解决方案是直接使用HTML语法，它完美地运行：
```
<img src="http://....jpg" width="200" height="200" />
```
我希望这有帮助 .
回复于 2024-04-28T19:34:39+08:00
10
Build 在Tiemes回答的基础上，如果您使用的是CSS 3，您可以使用substring selector：

此选择器将匹配任何带有'-fullwidth'结尾的alt标记的图像：
```
img[alt$="-fullwidth"]{
  width:  100%;
  display: block;
}
```
然后你仍然可以使用alt标签intended purpose来描述图像 .

上面的Markdown可能是这样的：
```
![Picture of the Beach -fullwidth](beach.jpg)
```
我一直在Ghost降价中使用它，它一直运作良好 .
回复于 2024-04-28T19:34:39+08:00
8
使用某些Markdown实现（包括Mou和Marked 2（仅限macOS）），您可以在图形文件的URL之后追加 =WIDTHxHEIGHT 来调整图像大小 . 不要忘记 = 之前的空间 .
```
![](./pic/pic1_50.png =100x20)
```
你可以跳过高度
```
![](./pic/pic1s.png =250x)
```
回复于 2024-04-28T19:34:39+08:00
2
您可以在Markdown中使用一些HTML：
```
<img src="drawing.jpg" alt="drawing" width="200"/>
```
或者通过 style 属性（ not supported by GitHub ）
```
<img src="drawing.jpg" alt="drawing" style="width:200px;"/>
```
或者您可以使用Markdown and image alignment上的答案中所述的自定义CSS文件
```
![drawing](drawing.jpg)
```
另一个文件中的CSS：
```
img[alt=drawing] { width: 200px; }
```
回复于 2024-04-28T19:34:39+08:00
1
我编写了简单的标记解析器，以便在Jekyll中使用自定义大小的img标记 .

https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079
```
{% img /path/to/img.png 100x200 %}
```
您可以将文件添加到 _plugins 文件夹 .
回复于 2024-04-28T19:34:39+08:00
624
有人可能会根据属性值在几乎所有Markdown实现/渲染 together with CSS-selectors 中设置 alt attribute . 优点是可以容易地定义一组不同的图片尺寸（以及其他属性） .

Markdown:
```
![minipic](mypic.jpg)
```
CSS:
```
img[alt="minipic"] { 
  max-width:  20px; 
  display: block;
}
```
回复于 2024-04-28T19:34:39+08:00
37
我来这里寻找答案 . 这里有一些很棒的建议 . 并且黄金信息指出markdown完全支持HTMl！

一个好的干净解决方案总是与纯HTML语法一起使用 . 随着标签 .

但我仍然试图坚持降价语法，所以我尝试将其包装在标签周围，并在div标签内添加了我想要的图像属性 . 它的工作原理!!
```
<div style="width:50%">![Chilling](https://www.w3schools.com/w3images/fjords.jpg)</div>
```
所以这种方式支持外部图像！

只是想我会把它放在那里，因为它不在任何答案中 . :)
回复于 2024-04-28T19:34:39+08:00
5
当使用Flask（我正在使用它与平面页面）...我发现显式启用（由于某种原因不是默认情况下）'attr_list'在markdown调用中的扩展中做了诀窍 - 然后可以使用属性（非常也可用于访问CSS - 例如...... = "my class"） .

FLATPAGES_HTML_RENDERER = prerender_jinja

和功能：
```
def prerender_jinja(text):
    prerendered_body = render_template_string(Markup(text))
    pygmented_body   = markdown.markdown(prerendered_body, extensions=['codehilite', 'fenced_code', 'tables', 'attr_list'])
    return pygmented_body
```
然后在Markdown：
```
![image](https://octodex.github.com/images/yaktocat.png "This is a tooltip"){: width=200px}
```
回复于 2024-04-28T19:34:39+08:00

在Markdown中更改图像大小

17 回答

有添加类和CSS样式的方法

然后记下下面的链接和CSS

相关问题