如何更改文件中的图片大小

Question

我有一个rmarkdown文件，如下所示：

--- 
title: "Playerreport"
output: 
 html_document:
  theme: null
  highlight: null
  css: styles.css
---

现在我想在文件中包含一张图片。像这样：

  <div class="container">![Caption for the picture.](C:\Users\Frits\Pictures\zlatan.jpg)    </div>

并希望使用.css文件中的以下代码设置此样式＆＃34; styles.css＆＃34;

.container {
width: 100px;
height: 120px;
}

但是图片并没有改变。有什么想法会出错吗？ .css文件中的其他元素可以正常工作。

Answer 1

你似乎正在改变div的宽度和高度而不是img。 css应该是这样的：

.container img{
    width: 100px;
    height: 120px;
}

这个html：

<div class="container">
    <img src="image.png">
</div>

保持图像比例：

.container img{
    width: 100px;
    height: 100%;
}

Answer 2

有一个原生的pandoc-markdown解决方案。自pandoc 1.16起，您可以使用link_attribute扩展程序设置单个图片大小或为其提供课程。

在您的情况下，您可以为单个图像执行此操作（优点是它应适用于每种输出格式）：

![Caption for the picture.](/path/to/pic/zlatan.jpg){width=100px height=120px}

如果你必须以这种方式设置多个图像，这应该适用于原始的css代码（仅适用于html输出）：

![Caption for the picture.](/path/to/pic/zlatan.jpg){.container}