Menu
I have an image that's inline with text. That image is 32x32. I'm looking to have it auto size to the line height of where it's contained so it fits properly. Is there a way to do that?
I'm looking to be able to place the image anywhere with an unknown line height and have it resize properly.
608
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.
You can use the CSS background-size: cover; to stretch and scale an image in the background with CSS only. This scales the image as large as possible in such a way that the background area is completely covered by the background image, while preserving its intrinsic aspect ratio.
Use img{height: 1em;} /* whatever your line height may be, it is affected by its font-size /*
See this Updated Demo (Increase or decrease the font size to view the result.)
198
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
