reactjs - 将 objectFit 与来自 gatsby-plugin-image 的 StaticImage 结合使用

Question

我在我的网络应用程序中使用 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' 不会改变的任何想法？

Answer 1

有一个 Prop “objectFit”(连同“objectPosition”)可以直接传递给 StaticImage。我会尝试的。我的猜测是您传递的样式在 StaticImage 中被覆盖，但传递直接 Prop 会修复它。 https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/