title: CSS overriding width and height attribute. Why?
body: <p>When I have an image with attributes <code>width</code> and <code>height</code> my css is overriding these attributes but if I have inline-styles with width and height my external css doesn't override the inline-styles. Why?</p>
  
  <p>Example code without added CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Example code with added CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pic {
    width: auto;
    height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Example code with inline style:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pic {
    width: auto;
    height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" style="width: 100px; height: 100px" /&gt;</code></pre>
  </div>
  </div>
  </p>