When working with bootstrap cards, I encountered the need to make all images within the cards the same size. While there are various ways to achieve this, I used the following styling approach:
Take a look at 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 encountered an error:
SyntaxError: C:\Users\hpoddar\Desktop\WebDev\ReactComplete\newsapp\src\components\NewsItem.js: Unexpected token, expected "," (10:110)
https://i.sstatic.net/0eoj8.png
Removing the object-fit attribute resolved the issue, eliminating the wiggly line. Everything now works as expected.
Any suggestions on how to approach this?
Bootstrap version : 5.1
react: 17.0.2
react-dom: 17.0.2
react-scripts: 4.0.3
web-vitals: 1.1.2
UPDATE : I questioned the use of object-fit as objectFit, which was clarified in the comments by Andrew.
As inline CSS is written within a JavaScript object, properties with two names, such as background-color, should be in camel case syntax: