Using objectFit with StaticImage from gatsby-plugin-image

Viewed 923

I am using gatsby-plugin-image's StaticImage component in my web app, and I am having trouble changing objectFit's property from 'cover' to 'contain.'

Here is a sample of my code:

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>
            
        
    )
}

I have also tried using style={{ objectFit: 'contain' }} and imgStyle={{ objectFit: 'contain' }} to see if using those props would change the styling. I'm using Sass to style other parts of the website as well, and adding that styling option via Sass and class names isn't working either.

Any ideas as to why the default object-fit: 'cover' won't change?

1 Answers
Related