title: Product cards image resize automatically
body: <p>I am creating a CRUD application for an ecommerce website. I am trying to display the product cards. However, I would like to ensure that every image uploaded will be automatically resized in order for the cards to be aligned no matter what.</p>
  <p><a href="https://i.stack.imgur.com/YhsWx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YhsWx.png" alt="here is a screenshot" /></a></p>
  <p>HTML with Bootstrap:</p>
  <pre><code>&lt;div className=&quot;card h-100&quot;&gt;
      &lt;a href=&quot;#!&quot;&gt;
          &lt;img
              className=&quot;img-fluid w-100 img-card&quot;
              src={`/uploads/${product.fileName}`}
              alt=&quot;product&quot;
          /&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.img-card{
      height: auto;
      max-height: 250px;
      width: auto;
  }
  </code></pre>