Problem with <picture> tag

[wake689]

Hi,

I have recently come across the webp picture format and the use of the tag to use .webp images in supporting browsers and .jpg in non-supporting. But I have run onto a frustrating problem. Codepen pasted below.

The “logo.webp” is displayed with a thin sliver of pale colour along the bottom and left. Looking at the developer tools the image has a height of 100px but has a height of 104px. If I alter the height in the image and source tags to 104px then the height of increases to 108px.

The sliver on the left and bottom of the image disappears if I just use the <img… line, removing the and lines.

What am I doing wrong? Thank you.

[Gandalf]

The first thing to do is to validate your HTML. There are multiple errors.

[PaulOB]

@wake689

What am I doing wrong? Thank you.

As Gandalf said you need to fix the html errors as your attributes are wrong in those img and picture tags but they aren’t really the cause of the problem.

Images are inline elements and are stacked on the baseline (not the bottom) of an element and they also respect the white space around them hence why you get a gap at the bottom and the side.

If you set the the image to display:block the issue will go away.

.logo{display:block}

The reason why that if you remove the picture element and just use the img tag the problem doesn’t occur is because the image is now a flex item as it is a direct child of the header which is a flex box and as such flex-items have the equivalent of a block display by default. When the image is inside a picture element it is no longer a direct child of flexbox and its display isn’t altered.

I usually set all my images to display:block in my initial set up ( img{display:block} ) because most times that’s what required. If you need inline images then you can make special classes for them as required.

[wake689]

@Gandalf

The first thing to do is to validate your HTML. There are multiple errors.

Thank you. I will endeavour not to post without validating code first in future.

I have now made a fork in codepen and then validated and edited with validated code.

[wake689]

Thank you for that. Excellent well explained help as always. After reading it I added to my CSS:

img,source{display:block}

and it worked. I will do this in future. Thank you again.