title: Wrong height of div with img tag inside
body: <p>I have a div with an image tag inside, and the div height appears to be a little larger than the image.</p>
  
  <p>I could fix this problem by setting a specific height for the div (the same as the image), but I'm working with a responsive layout, and I don't want to set a specific height for the div, so that when the browser window scales (for example in mobile devices) the div will scale and maintain the ratio.</p>
  
  <p>I need that the div height to be exactly as the image height.</p>
  
  <p>This is the scenario:</p>
  
  <p><code>&lt;div class='box'&gt;&lt;img src='image.jpg'&gt;&lt;/div&gt;</code></p>
  
  <p>Css is:</p>
  
  <p><code>img {
      height: auto;
      max-width: 100%;
      width: auto;
  }</code></p>
  
  <p>Does anybody know how to fix this problem?</p>
  
  <p><img src="https://i.stack.imgur.com/gV1pO.jpg" alt="Screenshot"></p>