title: anchor tag with background image auto height come as zero
body: <p>My css:</p>
  
  <pre><code>a.red, object, embed {
      display: inline-block;
      background-image:url(/bowties/red.png);
      background-size: contain;
      background-repeat:no-repeat;
      width: 100%;
      height: 30%;
  }
  </code></pre>
  
  <p>My Html:</p>
  
  <pre><code>&lt;a class="red"/&gt;
  </code></pre>
  
  <p>What I want to do is have the image automatically sized right so I can use these as menu items. One on top of the next and so on. If I kept them in an image tag wrapped in an anchor then "height: auto;" works. I want to turn them into sprites which is why I am pulling it out, but I would like these to scale based on the size of the screen. Thanks in advance!</p>