我使用的是Bootstrap卡片,需要设置所有卡片中的图像具有相同的大小。虽然有多种方法可以实现相同的效果,但我正在使用此样式来实现相同的效果。
请查看下面的图像样式
<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
编辑: 我曾经怀疑为什么要使用objectFit,而不是object-fit,这一点在Andrew的评论中得到了解答。
由于内联CSS是以JavaScript对象的形式编写的,因此具有两个名称的属性(例如background-color)必须以驼峰命名法语法编写:
object-fit: contain
时,它对我有效,为什么在JSX中我需要像这样使用它objectFit: 'cover'/contain
。我该如何知道发生了哪些变化,是否有任何文件或博客提到了相同的问题? - Himanshuman