title: How to set image size dynamically in ReactJS?
body: <p>I have structure like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
      width: auto;
      height: 200px;
  }
  
  .cards {
      display: flex;
      justify-content: center;
      margin-top: 2em;
      width: 80%;
      flex-wrap: wrap;
  }
  
  .card {
      margin: 1em;
      box-shadow: 0 0 6px #000;
      object-fit: cover;
  }
  
  .info {
      padding: 1em;
      border-top: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='cards'&gt;
     &lt;div class="card"&gt;
       &lt;img src="https://picsum.photos/id/1004/5616/3744" alt="1004" /&gt;
       &lt;div class="info"&gt;
         &lt;h3&gt;Greg Rakozy&lt;/h3&gt;
         &lt;div&gt;&lt;small&gt;https://unsplash.com/photos/SSxIGsySh8o&lt;/small&gt;&lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>on computers with long width image is rendered a little wrong.
  <a href="https://i.stack.imgur.com/Hjw0E.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hjw0E.jpg" alt="enter image description here" /></a>
  how can I fix this so that it displays correctly, i.e. sticks to the '.card' block?</p>