将 objectFit 与 gatsby-plugin-image 中的 StaticImage 结合使用答案

【问题标题】：Using objectFit with StaticImage from gatsby-plugin-image将 objectFit 与 gatsby-plugin-image 中的 StaticImage 结合使用
【发布时间】：2021-09-20 18:15:13
【问题描述】：

我在我的网络应用程序中使用了 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' }} 来查看使用这些道具是否会改变样式。我也在使用 Sass 为网站的其他部分设置样式，通过 Sass 和类名添加样式选项也不起作用。

关于为什么默认 object-fit: 'cover' 不会改变的任何想法？

【问题讨论】：

可以提供沙箱吗？

标签： reactjs sass gatsby

【解决方案1】：

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

【讨论】：