Geek Answers Handbook

Why does my HTML5 <picture> have a height outside of <img> and why does it not contain <img>?

HERE THAT I DO NOT EXPECT

Oddly enough, the <picture> seems to have its own location and height below the image itself. Its CSS height set to auto , so I'm not sure where this 18px height 18px .

HERE EXPECTED BEHAVIOR

<picture> contains <img> within <picture> . <picture> has the same height as inside it in HTML / DOM, for example. <img> .

HERE WHAT I DID TO TRY TO FIND A PROBLEM

I tried to remove the PictureFill library that we use so that the image fills the container, but this is not what affects this height.

I also tried checking the DOM to see where the <picture> height comes from. There are no margins or margins or heights on this element. The only content is <source> and <img> , which are the standard included elements for <picture> .

Any help or understanding is greatly appreciated. Sample code in JSBin !

HERE 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 SCREENSHIP THAT I AM VIDEO

enter image description here

+7
html css html5
source share
3 answers

I found the following in WHATWG :

An image element is slightly different from similar video and audio elements. Although they all contain the original elements, the src attribute of the original element does not matter when the element is nested in the image element, and the resource selection algorithm is different. In addition, the image element itself does not display anything; it just provides a context for the img element it contains, which allows it to choose from multiple URLs.

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

This means that the <picture> element does not accept the dimensions of its children, including <img> . I say, because the description does not explicitly say: <picture> has no <img> dimensions, but if it does not actually display <img> , then we can assume that it will not have sizes said <img> .

  1. why doesn't it contain <img> ?

It contains <img> and contains <source> , not a traditional container. it just provides a context for the img element it contains ... The <picture> value is more like a list for an <img> for a link when choosing the right <source> .

At the same time, if you need a container to transfer this group, use <figure> . This is a good element of the semantic block that will contain and accept content sizes on it ... more or less (a little Chrome setup is required to add unwanted files to it. See BIN)

Jsbin

+1
source share

CORRECTION

The @Alohci score in the answer below is correct. However, in this case, applying display: block to the contained <img> rather than the external <picture> solves the problem. This causes the <picture> container to take the size of the <img> block.

It turns out that the answer to this question is somewhat based on the vertical alignment of <img> , and not on the structure of the <picture> element. This Stack Overflow answer resolves the issue:

Why is there space under the image in this code?

+1
source share

The default image element is an indispensable inline element. CSS 2.2 talks about these elements:

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

Thus, the height of the image element corresponds to one line of text and has nothing to do with the img element contained in it.

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

+1
source share

More articles:


All Articles