我刚刚开始使用Markdown。我喜欢它,但有一件事让我烦恼:如何使用Markdown改变图像的大小?
该文档仅为图像提供以下建议:
![drawing](drawing.jpg)
如果可能的话,我希望图片也能居中。我要求一般Markdown,而不仅仅是GitHub如何做到这一点。
我来这里寻找答案。这里有一些很棒的建议。黄金信息指出markdown完全支持HTMl!
一个好的干净解决方案总是与纯HTML语法一起使用。随着标签。
但我仍然试图坚持降价语法,所以我尝试将其包裹在标签周围,并为div标签内的图像添加了我想要的任何属性。它的工作原理!!
<div style="width:50%">![Chilling](https://www.w3schools.com/w3images/fjords.jpg)</div>
所以这种方式支持外部图像!
只是想我会把它放在那里,因为它不在任何答案中。 :)
我编写了简单的标记解析器,以便在Jekyll中使用自定义大小的img标记。
https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079
{% img /path/to/img.png 100x200 %}
您可以将文件添加到_plugins
文件夹中。
我知道这个答案有点具体,但它可能会帮助其他有需要的人。
由于使用Imgur service上传了许多照片,您可以使用the API detailed here来更改照片的大小。
在GitHub发布评论中上传照片时,它将通过Imgur添加,因此如果照片非常大,这将有很大帮助。
基本上,你会把http://i.imgur.com/12345.jpg用于中等大小的图像而不是http://i.imgur.com/12345m.jpg。
您可以使用这个以及kramdown:
markdown
![drawing](drawing.jpg)
{:.some-css-class style="width: 200px"}
要么
markdown
![drawing](drawing.jpg)
{:.some-css-class width="200"}
这样,您可以直接将任意属性添加到最后一个html元素。要添加类,有一个快捷方式.class.secondclass。
![pic][logo]{.classname}
[logo]: (picurl)
<style type="text/css">
.classname{
width: 200px;
}
</style>
对于那些对rmarkdown
和knitr
解决方案感兴趣的人。有一些方法可以在不使用.rmd
的情况下在html
文件中调整图像大小:
您可以通过添加{width=123px}
来指定图像的宽度。不要在括号之间引入空格:
![image description]('your-image.png'){width=250px}
另一种选择是使用knitr::include_graphics
:
```{r, fig.cap="image description", out.width = '50%'}
knitr::include_graphics('your-image.png')
```
对于R-Markdown,上述两种解决方案都不适合我,所以我转向常规的LaTeX语法,这很好用。
\begin{figure}
\includegraphics[width=300pt, height = 125 pt]{drawing.jpg}
\end{figure}
然后你可以使用例如\begin{center}
语句使图像居中。
在源URL中添加相对尺寸将在大多数Markdown渲染器中呈现。
我们在Corilla中实现了这一点,因为我认为该模式遵循现有工作流程的期望而不会促使用户依赖基本HTML。如果您最喜欢的工具不遵循类似的模式,则值得提出功能请求。
语法示例:
![a-kitten.jpg](//corilla.com/a-kitten-2xU3C2.jpg =200x200)
小猫的例子:
当使用Flask(我正在使用它与平面页面)...我发现显式启用(由于某种原因不是默认)在markdown调用中的扩展中的'attr_list'可以实现 - 然后可以使用属性(非常有用的访问CSS - class =“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}
如果更改初始降价不适合您,则此黑客可能会起作用:
newHtml = oldHtml.replace(/<img/g, '<img height="100"');
我用这个能够在发送电子邮件之前调整图像大小(因为Outlook忽略任何图像css样式)
您可以在Markdown中使用一些HTML:
<img src="drawing.jpg" alt="drawing" width="200"/>
或者通过style
属性(GitHub不支持)
<img src="drawing.jpg" alt="drawing" style="width:200px;"/>
或者你可以使用Markdown and image alignment上这个答案中描述的自定义CSS文件
![drawing](drawing.jpg)
另一个文件中的CSS:
img[alt=drawing] { width: 200px; }
这里接受的答案不适用于我迄今为止使用过的应用程序中的任何Markdown编辑器,如Ghost,Stackedit.io或甚至Stack Overflow编辑器。我找到了一个解决方法here in the StackEdit.io issue tracker。
解决方案是直接使用HTML语法,它完美地工作:
<img src="http://....jpg" width="200" height="200" />
我希望这有帮助。
只需使用:
<img src="Assets/icon.png" width="200">
代替:
![](Assets/icon.png)
如果您正在为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
也许这最近发生了变化,但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上运行。
可以使用alt
属性,该属性可以在几乎所有Markdown实现/渲染中与基于属性值的CSS选择器一起设置。优点是可以容易地定义一组不同的图片尺寸(以及其他属性)。
降价:
![minipic](mypic.jpg)
CSS:
img[alt="minipic"] {
max-width: 20px;
display: block;
}
如果你是using kramdown,你可以这样做:
{:.foo}
![drawing](drawing.jpg)
然后将其添加到your Custom CSS:
.foo {
text-align: center;
width: 100px;
}
从Tiemes回答,如果你使用CSS 3你可以使用substring selector:
此选择器将匹配任何带有以'-fullwidth'结尾的alt标记的图像:
img[alt$="-fullwidth"]{
width: 100%;
display: block;
}
然后你仍然可以使用其intended purpose的alt标签来描述图像。
上面的Markdown可能是这样的:
![Picture of the Beach -fullwidth](beach.jpg)
我一直在Ghost降价中使用它,它一直运行良好。