CSS issue with height and width of image

Question

I have image on jsx/html page that is div:

 <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

You can check the screenshot:

Css part of code:

.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?

Answer 1

The inline style provided in getBackgroundImage(thumbnail) has a higher priority than the CSS rules linked to the class. You have a couple of options:

1. Change getBackgroundImage to allow specifying another size (not 'thumb')

2. 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} />

3. Change the order of priority with !important

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