title: Image max size according to parent's line-height
body: <p>Is it possible with pure CSS to make an inline image size (scale) according to the line-height of its parent?</p>
  
  <p>Consider this set-up:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt;
    &lt;img src="image.png"/&gt; text text text
  &lt;/p&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>p {
    line-height: 16px;
  }
  
  img {
    display: inline;
    vertical-align: middle;
  }
  </code></pre>
  
  <p>What I would like is that the image gets scaled to a height of 16px, as is the <code>line-height</code> of the paragraph. Is this possible?</p>
  
  <p>please note: I'm open to changes in the HTML and CSS, but I'm not after a JS solution.</p>