Menu
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&rect=0%2C205%2C3264%2C1632&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&rect=0%2C205%2C3264%2C1632&s=d3ce62073acf8faef26303df602d98ca 480w,
https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=600&rect=0%2C205%2C3264%2C1632&s=299ee1965b7991d853f1c74ece47a4fc 600w,
https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=800&rect=0%2C205%2C3264%2C1632&s=7b00f35515de1a75308074e0b8531606 800w,
https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=1000&rect=0%2C205%2C3264%2C1632&s=6fa833f7049033ffa33ac3f11ec4433a 1000w,
https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=2000&rect=0%2C205%2C3264%2C1632&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
202
If your image doesn't fit the layout, you can resize it in the HTML. One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
Adding the height and width attributes to your IMG SRC HTML tag allows the browser to know how much space to leave for an image. Without these values, the browser doesn't initially create a space for the image, which means elements surrounding the image are adjusted after it has loaded.
The height attribute specifies the height of an image, in pixels.
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; }
116
The problem seems to be the "picture" element, the problem is due to the alignment of its element (the image).
You just only have to edit you img css instruction:
img {display:block}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
