title: html img width cannot show some smaller image?
body: <p>My Wordpress post tries to show an image with HTML code like this:</p>
  
  <pre><code>&lt;a target="_blank" href="https://www.facebook.com/15925638948/posts/10152127553183949" hidefocus="true" style="outline: none;"&gt;
      &lt;img title="CBS Moving Forward With ‘How I Met Your Dad’" alt="" src="http://ia.media-imdb.com/images/M/MV5BMTA5MzAzNTcyNjZeQTJeQWpwZ15BbWU3MDUyMzE1MTk@._V1._SY317_.jpg" width="620" align=""&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>However, the image cannot be displayed. Chrome &amp; Safari shows a white box with a small image in the middle (the case that the image cannot be displayed). Firefox shows nothing for the image part but a blank line.</p>
  
  <p>If I remove this line</p>
  
  <pre><code>width="620"
  </code></pre>
  
  <p>the image displays.</p>
  
  <p>What's the rule about this width and the actual image width? It seems working fine for most cases but not for smaller images? How do I dynamically change the width to best fit my design?</p>