React JSX 无法识别图像样式属性中的对象适合度

Question

我使用的是引导卡，我需要将卡中的所有图像设置为具有相同的大小。虽然有多种方法可以实现相同的目标，但我使用这种样式来实现相同的目标。

检查下面的图像样式

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

但是我收到错误

SyntaxError：C:\Users\hpoddar\Desktop\WebDev\ReactComplete\newsapp\src\components\NewsItem.js：意外的标记，应为“，”(10:110)

如果我删除 object-fit 属性，一切都会正常工作并符合预期。蜿蜒的线消失了。

我该如何解决同样的问题？

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

编辑：我有这个疑问为什么 object-fit 被用作 objectFit，安德鲁在评论中回答了这个问题。

由于内联 CSS 是在 JavaScript 对象中编写的，因此具有两个名称的属性（例如背景颜色）必须使用驼峰式语法编写：

Answer 1

我认为object-fit: contain对于 JSX 来说是不正确的。尝试objectFit: 'contain'