title: Chrome image distorted. Firefox OK
body: <p>In a Joomla website, Chrome is distorting an image width. The image is of a light bulb which is displayed OK in Firefox, but in Chrome the width is much reduced so that the bulb looks more like a matchstick :) The HTML is:</p>
  
  <pre><code>&lt;p class="word_set"&gt;1
    &lt;span class="color_up audio" id="b1e01"&gt;the&lt;/span&gt;
    &lt;span class="color_up audio" id="b1t01"&gt;คำนำหน้านามเจาะจง &lt;/span&gt;
    &lt;span class="ws_dialog_icon" id="wsd01"&gt;  
      &lt;img class="wsd_img"  id="wsd_img01"  src="/templates/beez_20/images/e2tw/lamp_non-hover_20.png" alt="light bulb" height="18px" width="18px"&gt;&lt;/span&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>img.wsd_img {
     /* background: red; */
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
  }
  </code></pre>
  
  <p>I got the CSS setting from this SO article  <a href="https://stackoverflow.com/questions/18252469/retain-aspect-ratio-for-full-height-responsive-image-in-chrome">Retain aspect ratio for full height responsive image in Chrome</a>  but I had tried other variations before, all to no avail. I know the CSS is referencing the correct HTML element because the red background (here commented out) shows up on the image in both browsers.  Browser versions - Firefox 43, Chrome 47.0.2526.105. Any help would be much appreciated. </p>