[英]CSS issue with height and width of image
I have image on jsx/html page that is div: 我在div的jsx / html页面上有图像:
<div className="card-row-image" style={getBackgroundImage(thumbnail)} />
Problem is cus in css class height
and width
are 68px
but when I open application, on page width is lower then 68px
问题是cus中CSS类的
height
和width
为68px
但是当我打开应用程序时,页面宽度68px
You can check the screenshot: 您可以查看屏幕截图:
Css part of code: CSS部分代码:
.card-row-image {
height: 68px;
width: 68px;
border-radius: 4px;
margin-right: 10px;
background-size: cover;
background-position: center center;
}
Why with of image is not 68px? 为什么用的图像不是68px?
The inline style provided in getBackgroundImage(thumbnail)
has a higher priority than the CSS rules linked to the class. 与链接到该类的CSS规则相比,
getBackgroundImage(thumbnail)
提供的内联样式具有更高的优先级。 You have a couple of options: 您有两种选择:
Change getBackgroundImage
to allow specifying another size (not 'thumb') 更改
getBackgroundImage
以允许指定其他大小(不是'thumb')
Apply the inline style, but remove the width and height from it: 应用内联样式,但从其中删除宽度和高度:
const { width, height, ...styleWithoutSize } = getBackgroundImage(thumbnail)
<div className="card-row-image" style={styleWithoutSize} />
!important
!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.