React 中的 SVG 图像大小

Question

我有一个必须导入的 SVG 图像。 原始图像太大，因此必须缩小。

这是代码中添加的图像：

  render() {
    return (
      <div>
        <Grid>
          <img src={mySvgImage}></img>
          //other elements
        </Grid>
    </div>
    );
}

使用开发人员工具时，我发现如果在 Styles > element.style 中添加： height: 10% 图像大小会缩小到所需大小。 像这儿：

那么如何在代码中完成呢？

我像内联 CSS 一样添加它，但不起作用：

  render() {
    return (
      <div>
        <Grid>
          <img style={{ heigth: '10%' }} src={mySvgImage}></img>
          //other elements
        </Grid>
    </div>
    );
}

尝试将其保存在 css 文件中并使用className='myClassName'导入它，相同，没有更改。 图像具有原始大小。

如何才能做到这一点？

Answer 1

你可能有错别字：

// not heigth
<img style={{ height: '10%' }} src={mySvgImage}></img>

.imgClassName {
  height: 10%;
}

<div>
  <Grid>
    <img className="imgClassName" src={mySvgImage}></img>
  </Grid>
</div>