Ant Design: Is there anyway to set my card cover image to automatically fit the available space?

Question

I am working with Ant Design. I want my card cover image to automatically resize and fill the container but I am not able to do so.

Here is an example of what I am trying to achieve.

This is what I have

This is what I am trying to achieve.

The code I am using right now:

<Card
  hoverable={true}
  size="small"
  style={{ width: '200px', backgroundColor: 'transparent'}}
  cover={<img alt="images" src={data && data.image} style={imageStyle}/>}
  onClick={() => handleCardClick(data) }
  bordered={false}
></Card>

I tried multiple approaches to solve this problem such as adding CSS to the image element itself. But didn't got any satisfactory results.

const imageStyle = {
// height: '100%',
backgroundSize: 'cover',
borderRadius: '5px',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50%' }

What I found is that and-design wraps the image element in the ant-card-cover class, I am not sure if this is the culprit but I think this division does not resize accordingly. This is just my guess. Please correct me If I am wrong somewhere or have missed something.

Are you not confused in the screenshots? – Anton Komyshan Aug 02 '21 at 18:01 — Anton Komyshan, Aug 02 '21 at 18:01

score 3 · Accepted Answer · answered Aug 03 '21 at 01:41

I think you're asking an XY problem.

You're asking how to fit an image to the available space in a card. However, Antd will already do that by resizing your image to within the boundaries of your card while respecting the image's aspect ratio.

What you're really asking is to manually set a height for your card's cover and have the (wide) image fill that height by upscaling the image and showing only a portion of it (due to conflicting aspect ratio between the cover container and the image).

<Card
  hoverable
  style={{ width: 240 }}
  cover={
    <div style={{ overflow: "hidden", height: "600px" }}>
      <img
        alt="example"
        style={{ height: "100%" }}
        src="https://s3.amazonaws.com/thumbnails.venngage.com/template/a8897941-0545-4eaa-a427-76503a01b7e7.png"
      />
    </div>
  }
>
  <Meta title="Europe Street beat" description="www.instagram.com" />
</Card>

DEMO

Also, Is there any way I can center the image in that division? I used background-position attribute but didn't get the desired results. — Dinkar Jain, Aug 03 '21 at 08:05
@DinkarJain Hmmm try the solution presented [here](https://stackoverflow.com/a/19414020/6245650). — Scratch'N'Purr, Aug 03 '21 at 08:38

Ant Design: Is there anyway to set my card cover image to automatically fit the available space?

1 Answers1