圖像高度和寬度的CSS問題

Question

我在div的jsx / html頁面上有圖像：

 <div className="card-row-image" style={getBackgroundImage(thumbnail)} />

問題是cus中CSS類的height和width為68px但是當我打開應用程序時，頁面寬度68px

您可以查看屏幕截圖：

CSS部分代碼：

.card-row-image {
  height: 68px;
  width: 68px;
  border-radius: 4px;
  margin-right: 10px;
  background-size: cover;
  background-position: center center;
}

為什么用的圖像不是68px？

Answer 1

與鏈接到該類的CSS規則相比， getBackgroundImage(thumbnail)提供的內聯樣式具有更高的優先級。 您有兩種選擇：

1. 更改getBackgroundImage以允許指定其他大小（不是'thumb'）

2. 應用內聯樣式，但從其中刪除寬度和高度：

const { width, height, ...styleWithoutSize } = getBackgroundImage(thumbnail)
<div className="card-row-image" style={styleWithoutSize} />

3. 用!important更改優先級順序

.card-row-image {
  height: 68px !important;
  width: 68px !important;
  border-radius: 4px;
  margin-right: 10px;
  background-size: cover;
  background-position: center center;
}