I am currently facing a challenge while working with Ant Design. I am trying to make my card cover image automatically resize and occupy the entire container, but unfortunately, I have not been successful in achieving this.
Let me illustrate what I am aiming for:
The snippet of code that I am using at the moment:
<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 have attempted various methods to address this issue, including applying CSS directly to the image element itself. However, none of these approaches yielded satisfactory outcomes.
const imageStyle = {
// height: '100%',
backgroundSize: 'cover',
borderRadius: '5px',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50%' }
Upon inspection, it appears that ant-design encapsulates the image element within the ant-card-cover class. I suspect that this wrapping might be causing the resizing issue. This speculation is based on my observations, so please feel free to correct me if I have misunderstood something or overlooked any crucial details.