React中的SVG图像大小

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

这是在代码中添加的图像:

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

使用开发人员工具时,我发现如果在“样式”>“ element.style”中添加以下内容:高度:10%,图像尺寸将缩小为所需的尺寸。像这儿:

enter image description here

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

我像内联CSS一样添加了它,但是不起作用:

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

Tried with saving it in a css file and import it with className='myClassName', same, no changes. The image has the original size.

如何才能做到这一点?

评论
  • out
    out 回复

    您可能有错字:

    // not heigth
    <img style={{ height: '10%' }} src={mySvgImage}></img>
    
    .imgClassName {
      height: 10%;
    }
    
    <div>
      <Grid>
        <img className="imgClassName" src={mySvgImage}></img>
      </Grid>
    </div>