Why does my HTML5 <picture> have a height outside of its <img> and why does it not contain the <img>?
<p><strong>HERE IS WHAT I DO NOT EXPECT</strong></p>

<p>Strangely, the <code>&lt;picture&gt;</code> appears to have its own location and height below the image itself. Its CSS <code>height</code> is set to <code>auto</code>, so I'm unsure where this height of <code>18px</code> is coming from.</p>

<p><strong>HERE IS THE EXPECTED BEHAVIOR</strong></p>

<p>The <code>&lt;picture&gt;</code> to contain the <code>&lt;img&gt;</code> within the <code>&lt;picture&gt;</code>. The <code>&lt;picture&gt;</code> to have the same height as what is contained within it in the HTML/DOM, e.g. the <code>&lt;img&gt;</code>. </p>

<p><strong>HERE IS WHAT I'VE DONE TO TRY TO FIX THE PROBLEM</strong></p>

<p>I've tried removing the <a href="https://github.com/scottjehl/picturefill" rel="noreferrer">PictureFill</a> library we're using to ensure the image fills the container, but that's not what is affecting that height.</p>

<p>I've also tried inspecting the DOM to see where the height of <code>&lt;picture&gt;</code> is coming from. There is no padding or margin or height set on this element. The only content is its <code>&lt;source&gt;</code> and <code>&lt;img&gt;</code>, which are standard included elements for a <code>&lt;picture&gt;</code>.</p>

<p>Any help or insight is highly appreciated. <a href="http://jsbin.com/foweyepozo/edit?html,output" rel="noreferrer">Example code on JSBin</a>!</p>

<p><strong>HERE IS THE EXAMPLE CODE</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;picture content="https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=1000&amp;amp;rect=0%2C205%2C3264%2C1632&amp;amp;s=6fa833f7049033ffa33ac3f11ec4433a"&gt;
    &lt;source srcset="
     https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=480&amp;amp;rect=0%2C205%2C3264%2C1632&amp;amp;s=d3ce62073acf8faef26303df602d98ca 480w,
     https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=600&amp;amp;rect=0%2C205%2C3264%2C1632&amp;amp;s=299ee1965b7991d853f1c74ece47a4fc 600w,
     https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=800&amp;amp;rect=0%2C205%2C3264%2C1632&amp;amp;s=7b00f35515de1a75308074e0b8531606 800w,
     https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=1000&amp;amp;rect=0%2C205%2C3264%2C1632&amp;amp;s=6fa833f7049033ffa33ac3f11ec4433a 1000w,
     https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=2000&amp;amp;rect=0%2C205%2C3264%2C1632&amp;amp;s=03b760c29e398261cef276c2bdb0fcb2 2000w
    " sizes="100vw"&gt;

      &lt;img class="listing-hero-image js-picturefill-img" data-automation="listing-hero-image" alt="The Cat is in the (Hockey) Bag"&gt;
  &lt;/picture&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p><strong>HERE IS A SCREENSHOT OF WHAT I AM SEEING</strong></p>

<p><a href="https://i.stack.imgur.com/FbLiG.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/FbLiG.jpg" alt="enter image description here"></a></p>