<Image /> component nightmare...

Answered

Pacific anchoveta posted this in #help-forum

Pacific anchovetaOP

2023-10-23T11:27:12.000Z

Hi, everybody.

I have a hard time getting the Image component working as intended.

I want to restrict the heigh of an image to 40px, as I'm using it in a table row. Also, I need it to be object-fit: cover as I don't want it to be "skewed".

I tried to wrap the Image in a div with height: 40px, and then set fill and then style: {{object-fit: cover}}, but it does not work.

Could anyone give me a hint?

Answered by Pacific anchoveta

Problem solved by adding relative + height to the parent div.

View full answer

4 Replies

@Pacific anchoveta Hi, everybody. I have a hard time getting the `Image` component working as intended. I want to restrict the heigh of an image to 40px, as I'm using it in a table row. Also, I need it to be `object-fit: cover` as I don't want it to be "skewed". I tried to wrap the `Image` in a div with `height: 40px`, and then set `fill` and then `style: {{object-fit: cover}}`, but it does not work. Could anyone give me a hint?

Giant panda

2023-10-23T11:48:55.000Z

please share the code snippet

Pacific anchovetaOP

2023-10-24T07:21:33.000Z

Cape horse mackerel

2023-10-24T07:39:37.000Z

Have you tried to add height={40} to the Image?

Pacific anchovetaOP

2023-10-24T07:54:30.000Z

Problem solved by adding relative + height to the parent div.

Answer