我刚开始接触Markdown。我喜欢它,但有一件事困扰着我:如何使用Markdown更改图像的大小?
文档仅为图像提供以下建议:
![drawing](drawing.jpg)
如果可能的话,我希望图片也居中。我问的是Markdown将军,而不仅仅是GitHub是如何做到的。
我刚开始接触Markdown。我喜欢它,但有一件事困扰着我:如何使用Markdown更改图像的大小?
文档仅为图像提供以下建议:
![drawing](drawing.jpg)
如果可能的话,我希望图片也居中。我问的是Markdown将军,而不仅仅是GitHub是如何做到的。
当前回答
有添加类和css样式的方法
!〔pic〕〔logo〕{.classname}
然后在下面写下链接和css
[logo]: (picurl)
<style type="text/css">
.classname{
width: 200px;
}
</style>
此处引用
其他回答
Tieme的答案在大多数情况下都是最好的。
在我的例子中,我使用pandoc将markdown转换为乳胶。HTML标记在这里不起作用。
我的解决方案是重新实现includegraphics
\let\maxincludegraphics\includegraphics
\renewcommand{\includegraphics}[1]{\maxincludegraphics[max width=\textwidth]{#1}}
类似于在转换为HTML后使用CSS。
如果每个md文件中有一个图像,控制图像大小的一种简便方法是:
添加css样式如下:
## Who Invented JSON?
`Douglas Crockford`
Douglas Crockford originally specified the JSON format in the early 2000s.
![Douglas Crockford](img/Douglas_Crockford.jpg)
<style type="text/css">
img {
width: 250px;
}
</style>
输出如下:
如果每个md页面中有更多的图像,那么控制每个图像或每个自定义标记的简便方法是在css中定义每个元素。对于img标记,我们可以有:
//在css或样式标签中:img[alt=“结果1”]{宽度:100px;}img[alt=“结果2”]{宽度:200px;}img[alt=“结果3”]{宽度:400px;}//尝试使用以下方法之一在文档中插入图像:<br/><img src=“https://i.stack.imgur.com/xUb54.png“alt=”结果1“><br/><img src=“https://i.stack.imgur.com/xUb54.png“alt=”结果2“><br/><img src=“https://i.stack.imgur.com/xUb54.png“alt=”结果3“><br/><br/>在md中:<br/>![结果1](img/res-img-1.png)<br/>![结果2](img/res-img-2.png)<br/>![结果3](img/res-img-3.png)
你可以在kramdown中使用这个:
markdown
![drawing](drawing.jpg)
{:.some-css-class style="width: 200px"}
or
markdown
![drawing](drawing.jpg)
{:.some-css-class width="200"}
这样,您可以直接向最后一个html元素添加任意属性。要添加类,有一个快捷方式.class.secondclass。
人们可以利用alt属性,该属性可以在几乎所有Markdown实现/渲染中设置,以及基于属性值的CSS选择器。优点是可以轻松定义一整套不同的图片大小(以及其他属性)。
标记:
![minipic](mypic.jpg)
CSS:
img[alt="minipic"] {
max-width: 20px;
display: block;
}
将图像URL放入下面的标记中。记住要相应地更改宽度和高度。这样地
<img src="IMAGE_URL_HERE" width="300" height="300">
可以指定宽度而不指定高度属性,反之亦然。
或者,您可以使用百分比值更改图像大小,如下所示:
<img src="IMAGE_URL_HERE" width=50% height=50%>