React JSX does not identify object-fit in style attribute for image-CodePudding

I was using bootstrap cards, where I need to set all images in the cards having same size. Though there are multiple ways of achieving the same but I was using this styling to achieve the same.

Check the image style below

<div className="card " style={{width: "18rem"}}>
    <img src={imageUrl} className="card-img-top" style={{width: "100%", height: "40vh", object-fit: contain}} alt="..."/>
    <div className="card-body">
        <h5 className="card-title">{title}...</h5>
        <p className="card-text">{description}...</p>
        <a href={newsUrl} target="_blank" className="btn btn-sm rounded-pill btn-primary">Read More</a>
    </div>
</div>

However I am getting error

SyntaxError: C:\Users\hpoddar\Desktop\WebDev\ReactComplete\newsapp\src\components\NewsItem.js: Unexpected token, expected "," (10:110)

If I remove the object-fit attribute everything works fine and expected. And the wiggly line goes away.

How can I resolve the same?

Bootstrap version : 5.1
react: 17.0.2
react-dom: 17.0.2
react-scripts: 4.0.3
web-vitals: 1.1.2

EDIT : I had this doubt why object-fit was used as objectFit, which was answered in the comments by Andrew.

Since the inline CSS is written in a JavaScript object, properties with two names, like background-color, must be written with camel case syntax:

CodePudding user response：

I think object-fit: contain is not correct for JSX. Try objectFit: 'contain'