图像高度和宽度的CSS问题

Question

我在div的jsx / html页面上有图片：

 <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;
}

为什么with的图片不是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;
}