[英]SVG image size in React
I have an SVG image that must be imported.我有一个必须导入的 SVG 图像。 The original image is too big so it must be made smaller.
原始图像太大,因此必须缩小。
This is the image added in code:这是代码中添加的图像:
render() {
return (
<div>
<Grid>
<img src={mySvgImage}></img>
//other elements
</Grid>
</div>
);
}
Playing with Developers tools I had discovered that if in Styles > element.style it is added: height: 10% the image size is shrunk to the desired size.使用开发人员工具时,我发现如果在 Styles > element.style 中添加: height: 10% 图像大小会缩小到所需大小。 Like here:
像这儿:
So how can this be done in code?那么如何在代码中完成呢?
I added it like inline CSS but doesn't work:我像内联 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.尝试将其保存在 css 文件中并使用
className='myClassName'
导入它,相同,没有更改。 The image has the original size.图像具有原始大小。
How can this be done?如何才能做到这一点?
You might have a typo:你可能有错别字:
// not heigth
<img style={{ height: '10%' }} src={mySvgImage}></img>
.imgClassName {
height: 10%;
}
<div>
<Grid>
<img className="imgClassName" src={mySvgImage}></img>
</Grid>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.