Image dimensions: border-box / padding...

[chrisave]

Hello,

I hope your are doing well!

I have several logo images with the same (real) heights in pixels, but have just noticed that a lot had their heights reduced or increased on the page.

Apparently, it's because of:
*, *::after, *::before {
box-sizing: border-box;
}

Only the width is precised in the html code.
The images are in some (centered) paragraphs.

If I add the height to the html code (with firebug) it doesn't change anything, but if I remove the width the image has the correct (real) height (and width).
Otherwise, if I change box-sizing to content-box, for exemple, the images all have their real dimensions again.
So, perhaps I'm going to apply something like this only to images:

img, img::after, img::before {
box-sizing: content-box;
}

And I won't have reduced images. Apparently the width was also reduced on the page.

Could I have you opinion? Is it "ok" to make this change only to images?

Added:

Seeing it with firebug, it seems that it's mainly "because of" the padding (and also perhaps a little bit "because of" the border alone):

main img {

border: 1px solid #f8f8f8;
margin: 0.25em;
padding: 0.25em;

}

[cferdinandi]

You're right. In this case, border box plus a relatively sized padding is distorting the image.

Your fix works, though I'd generally recommend not using padding on images.