我正在使用引導卡，我需要在具有相同大小的卡中設定所有影像。盡管有多種方法可以實作相同的目標，但我使用這種樣式來實作相同的目標。
檢查下面的影像樣式
<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>
但是我收到錯誤
語法錯誤：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，這在 Andrew 的評論中得到了回答。
由于行內 CSS 是在 JavaScript 物件中撰寫的，因此具有兩個名稱的屬性（如背景顏色）必須使用駝峰式語法撰寫：
uj5u.com熱心網友回復：
我認為object-fit: containJSX 不正確。嘗試objectFit: 'contain'
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/314715.html
標籤：css 反应 推特引导 jsx bootstrap-5