我在 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?
最佳答案
getBackgroundImage(thumbnail)
中提供的内联样式比链接到该类的 CSS 规则具有更高的优先级。您有几个选择:
更改
getBackgroundImage
以允许指定其他大小(不是“thumb”)应用内联样式,但移除其中的宽度和高度:
const { width, height, ...styleWithoutSize } = getBackgroundImage(thumbnail)
<div className="card-row-image" style={styleWithoutSize} />
- 使用
!important
更改优先级顺序>
.card-row-image {
height: 68px !important;
width: 68px !important;
border-radius: 4px;
margin-right: 10px;
background-size: cover;
background-position: center center;
}
关于html - 图像高度和宽度的CSS问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57029589/