16

HERE IS WHAT I DO NOT EXPECT

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

HERE IS THE EXPECTED BEHAVIOR

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

HERE IS WHAT I'VE DONE TO TRY TO FIX THE PROBLEM

I've tried removing the PictureFill library we're using to ensure the image fills the container, but that's not what is affecting that height.

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

Any help or insight is highly appreciated. Example code on JSBin!

HERE IS THE EXAMPLE CODE

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <picture content="https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=1000&amp;rect=0%2C205%2C3264%2C1632&amp;s=6fa833f7049033ffa33ac3f11ec4433a">
    <source srcset="
     https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=480&amp;rect=0%2C205%2C3264%2C1632&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;rect=0%2C205%2C3264%2C1632&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;rect=0%2C205%2C3264%2C1632&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;rect=0%2C205%2C3264%2C1632&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;rect=0%2C205%2C3264%2C1632&amp;s=03b760c29e398261cef276c2bdb0fcb2 2000w
    " sizes="100vw">

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

</html>

HERE IS A SCREENSHOT OF WHAT I AM SEEING

enter image description here

jennz0r
  • 1,533
  • 2
  • 15
  • 26
  • 1
    I tried to debug your picture, but it's a picture, and my browser won't put a breakpoint on it. Please include a [mcve]. – Heretic Monkey Jul 13 '16 at 21:05
  • Ah, sorry, here we go: http://jsbin.com/foweyepozo/edit?html,output – jennz0r Jul 13 '16 at 21:08
  • 1
    Include the code in the question itself, not on some third-party website. And describe what you expect to happen, what does happen, and what you've tried to fix the problem. See [ask]. – Heretic Monkey Jul 13 '16 at 21:10
  • Ok @MikeMcCaughan, I think I've added all those details. A re-open would be a huge solid because this is a question for my actual job, not a passing or unresearched comment. This isn't something I've been able to debug after asking multiple people on my team and was really hoping to get some crowd sourced help. I also haven't been able to find any other information on this issue from several HTML/CSS sources such as MDN, TutsPlus, and more. – jennz0r Jul 13 '16 at 21:50

5 Answers5

12

The picture element is by default a non-replaced inline element. CSS 2.2 says of such elements:

The height of the content area should be based on the font, but this specification does not specify how.

So the picture element's height is that of one line of text, and nothing to do with the img element it contains.

To fix, just apply this css: picture { display:block; }

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • 2
    You're right about `display: block`, but actually I think in this case, we'd apply it to the ``. That allows the `` to take on the height of the `. Thank you!!! – jennz0r Jul 14 '16 at 00:59
5

The problem is due to the alignment of the image element (tag "img").

You just only have to edit you img css instruction:

img {display:block}
dulup
  • 81
  • 2
  • 8
2

CORRECTION

@Alohci's assessment in the answer below is correct. However, in this case, applying display: block to the contained <img> rather than the outer <picture> solves the problem. Doing so forces the <picture> container to take on the size of the block level <img>.

Turns out the answer to this question is somewhat based in the vertical alignment of the <img>, not the structure of the <picture> element. This Stack Overflow answer appears to fix the issue:

Why is there space under the image in this code?

Community
  • 1
  • 1
jennz0r
  • 1,533
  • 2
  • 15
  • 26
  • Right solution, at least for `display:block`, but wrong reason. It has nothing to do with vertical alignment. – Alohci Jul 14 '16 at 00:51
1

I found the following in WHATWG:

The picture element is somewhat different from the similar-looking video and audio elements. While all of them contain source elements, the source element's src attribute has no meaning when the element is nested within a picture element, and the resource selection algorithm is different. Also, the picture element itself does not display anything; it merely provides a context for its contained img element that enables it to choose from multiple URLs.

  1. Why does my HTML5 <picture> have a height outside of its <img>?

This implies that the <picture> element doesn't take on the dimensions of it's children, including <img>. I say implies because the description does not explicitly says: <picture> does not have the dimensions of <img>, but if it doesn't actually display the <img>, then it's safe to assume it won't have the dimensions of said <img>.

  1. why does it not contain the <img>?

It does contain the <img> and it contains the <source>s as well, it's not a traditional container. it merely provides a context for its contained img element... Meaning that <picture> is more like a list for the <img> to refer to when selecting a proper <source>.

That being said, if you need a container to wrap that group in, use <figure>. It's a nice semantic block element that will contain and take on it's content's dimensions...more or less (needs a little adjusting Chrome likes to add junk to it. see BIN)

JSBIN

Community
  • 1
  • 1
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • Thanks for the info! I still can't figure out why the `` would have any dimension at all then. It's such a seemingly random size at `18px`. Unfortunately, having it in a `
    ` doesn't help - the `` still has the `18px` height causing a tiny blank space between the `` and any container, in this case, the `
    ` :(
     – jennz0r Jul 14 '16 at 00:36
  • Oh wow, I think with your help I may have just answered my own question... http://stackoverflow.com/questions/15796414/why-is-there-space-under-the-image-in-this-code Sigh, of course it's a stupidly simple fix. :/ – jennz0r Jul 14 '16 at 00:38
  • I have a feeling that the `` element could be set to `height: 0` and still function. – zer00ne Jul 14 '16 at 01:59
  • I tried setting the height of ``, but that doesn't work. Did you try it in the code sample/example above? – jennz0r Jul 14 '16 at 04:25
0

This forces img tags inside of a picture to respect the boundaries of the parent container (the picture) instead of just arbitrarily being bigger or smaller than it:

picture {
    display: flex;
}

Once the picture has sane layout rules (its contents stay inside of it), other layout adjustments can be made (such as horizontal centering, vertical centering, margins, padding, borders, etc.) using normal flexbox CSS.

Andrew Koster
  • 1,550
  • 1
  • 21
  • 31