Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Automatically scale an image to match text height

I've got an image which I want to use inline with some text, but I need it to match the text height. I know it's possible to something like <img src="img.jpg" height=16> or even <img src="img.jpg" height="100%">, but the former does not scale with text size and the latter seems to make it the size of the div, not the text height. Can anyone help?

Example HTML:

<body> This is a test <img src="img.jpg"> </body> 
like image 617
rlbond Avatar asked Sep 05 '12 16:09

rlbond


People also ask

How do I resize an image automatically?

Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.

How do you scale a photo proportionally?

If the Shift key is held down whilst moving the handle, then the proportions of the object will be preserved. For example, if I hold Shift and drag the bottom edge upwards to reduce the size by half, then the right edge will automatically move to the left to reduce the width of the object by the same amount.

How do I scale an image to fit the screen in 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. For example, the original image is 640×960.


1 Answers

Did you try this giving the image height as 1em?

img {height: 1em;} 

Check out the fiddle here: http://jsfiddle.net/yAr7z/

like image 166
Praveen Kumar Purushothaman Avatar answered Sep 17 '22 17:09

Praveen Kumar Purushothaman