我在我的网络应用程序中使用 gatsby-plugin-image 的 StaticImage 组件,但我无法将 objectFit 的属性从“cover”更改为“contain”。
这是我的代码示例:
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import { StaticImage } from 'gatsby-plugin-image'
export default function About() {
return (
<div id="about">
<Container fluid >
<Row className="justify-content-center align-items-center">
<Col md={12} >
<StaticImage src="../images/coolImage.JPG" objectFit="contain" alt="Profile Picture" />
</Col>
</Row>
</Container>
</div>
)
}
我也尝试过使用 style={{ objectFit: 'contain' }}
和 imgStyle={{ objectFit: 'contain' }}
看看是否使用它们 Prop 会改变造型。我也在使用 Sass 为网站的其他部分设置样式,但通过 Sass 和类名添加样式选项也不起作用。
关于为什么默认 object-fit: 'cover'
不会改变的任何想法?
最佳答案
有一个 Prop “objectFit”(连同“objectPosition”)可以直接传递给 StaticImage。我会尝试的。我的猜测是您传递的样式在 StaticImage 中被覆盖,但传递直接 Prop 会修复它。 https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/
关于reactjs - 将 objectFit 与来自 gatsby-plugin-image 的 StaticImage 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68332805/