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>