title: How to make images fill my carousel slides
body: <p>I am trying to fit my images into the slides.</p>
  <p>Below is my example code and screenshots:</p>
  <pre><code>&lt;div className=&quot;relative h-24 w-20 sm:h-44 sm:w-100 md:h-44 md:w-60 flex-shrink-0&quot;&gt;
    &lt;Carousel showThumbs={false}&gt;
      {imgSrc?.map((url, index) =&gt; (
        &lt;div className=&quot;h-24 w-20 sm:h-44 sm:w-100 md:h-44 md:w-60 flex-shrink-0&quot; &gt;
          &lt;img class=&quot;object-fill rounded-md&quot; src={`${url}`} /&gt;
        &lt;/div&gt;
      ))}
    &lt;/Carousel&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/CbOSb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CbOSb.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/Yhscz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yhscz.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/s6Wjo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s6Wjo.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/g38KW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g38KW.png" alt="enter image description here" /></a></p>
  <p>What I have done is:</p>
  <ol>
  <li><p>Set the first  block into fix size. This is the size I want every image will be constrained into.</p>
  </li>
  <li><p>Inside the Carousel: Since the <code>&lt;div&gt;</code> and <code>&lt;img&gt;</code> tags are the protocol in this library. So I'm just following it.</p>
  </li>
  <li><p>To make sure everything will be constrained into fixed length. I set same CSS rule to every tag.</p>
  </li>
  </ol>
  <p>The result is that not all images display the same size. Some have some empty space which I don't want to see.</p>
  <p>May I know how to fix it? Isn't this the way of this CSS is intended to be used?</p>
  <hr />
  <p>[updated with Ed Lucas's code]</p>
  <p>In MD setting, all the images in thumbnail are perfectly fitted into the box.</p>
  <p>However, when screen shrinks, some images suddenly <strong>shrink smaller than</strong> the thumbnail while some could still align with the box size. Do you know any ideas?</p>
  <pre><code>&lt;div className=&quot;relative h-30 w-40 sm:h-44 sm:w-100 md:h-44 md:w-60 flex-shrink-0&quot;&gt;
    &lt;Carousel showThumbs={false}&gt;
      {imgSrc?.map((url, index) =&gt; (
        &lt;div className=&quot;h-30 w-40 sm:h-44 sm:w-100 md:h-44 md:w-60 flex-shrink-0&quot; &gt;
          &lt;img class=&quot;object-cover h-full w-full rounded-md&quot; src={`${url}`} /&gt;
        &lt;/div&gt;
      ))}
    &lt;/Carousel&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is example in small screen size</p>
  <p>normal:</p>
  <p><a href="https://i.stack.imgur.com/qFHIB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qFHIB.png" alt="enter image description here" /></a></p>
  <p>abnormal pictures</p>
  <p><a href="https://i.stack.imgur.com/EM3sQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EM3sQ.png" alt="enter image description here" /></a></p>