[英]CSS issue with height and width of image
我在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?
与链接到该类的CSS规则相比, getBackgroundImage(thumbnail)
提供的内联样式具有更高的优先级。 您有两种选择:
更改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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.