html - 图像高度和宽度的CSS问题

Question

我在 jsx/html 页面上的图像是 div:

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

问题出在 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

getBackgroundImage(thumbnail) 中提供的内联样式比链接到该类的 CSS 规则具有更高的优先级。您有几个选择:

1. 更改 getBackgroundImage 以允许指定其他大小(不是“thumb”)

2. 应用内联样式，但移除其中的宽度和高度:

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

1. 使用 !important 更改优先级顺序>

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