title: How to resize a png image to fit in a div?
body: <p>I am trying to resize a <strong>PNG</strong> image to fit in a <strong>div</strong></p>
  
  <p>This the div where I'd like to fit it in:
  <a href="https://i.stack.imgur.com/XzbpC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XzbpC.png" alt="enter image description here"></a></p>
  
  <p>But this is how it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/rHLuQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rHLuQ.png" alt="enter image description here"></a></p>
  
  <p>I tried to solve it by this <a href="https://stackoverflow.com/questions/15685666/changing-image-sizes-proportionally-using-css">Changing image sizes proportionally using CSS?</a> but no change was noticed.</p>
  
  <p>Here's the code snippet:</p>
  
  <pre><code> &lt;div className="Card-header"&gt;
                  {this.props.roadmapID}
                  &lt;label className="Card-header-status"&gt;{this.props.technology.toString().replace(/,/g , " ")}&lt;/label&gt;
                  &lt;label&gt;{this.props.category}&lt;/label&gt;
                  &lt;img src="images/dark_chat.png"&gt;&lt;/img&gt;
                  &lt;CardStatus
                      status = {this.props.status}
                      onClickStatus = {this.props.onClickStatus}
                  /&gt;
              &lt;/div&gt;
  </code></pre>