title: Ant Design: Is there anyway to set my card cover image to automatically fit the available space?
body: <p>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.</p>
  <p>Here is an example of what I am trying to achieve.</p>
  <p><a href="https://i.stack.imgur.com/ArAc3.png" rel="nofollow noreferrer">This is what I have</a></p>
  <p><a href="https://i.stack.imgur.com/zucW7.png" rel="nofollow noreferrer">This is what I am trying to achieve.</a></p>
  <p>The code I am using right now:</p>
  <pre><code>&lt;Card
    hoverable={true}
    size=&quot;small&quot;
    style={{ width: '200px', backgroundColor: 'transparent'}}
    cover={&lt;img alt=&quot;images&quot; src={data &amp;&amp; data.image} style={imageStyle}/&gt;}
    onClick={() =&gt; handleCardClick(data) }
    bordered={false}
  &gt;&lt;/Card&gt;
  </code></pre>
  <p>I tried multiple approaches to solve this problem such as adding CSS to the image element itself. But didn't got any satisfactory results.</p>
  <pre><code>const imageStyle = {
  // height: '100%',
  backgroundSize: 'cover',
  borderRadius: '5px',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: '50%' }
  </code></pre>
  <p>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.</p>