How can I display an image using the "em" unit?

html css image xhtml em
Benjamins picture Benjamins · Aug 11, 2009 · Viewed 17.8k times · Source

I've created a <div> with width:10em and height:5em.
Now I would like to display an <img> (GIF image) in this <div> with the exact same size. But apparently it doesn't "know" the em unit. It shows the picture in 10x5 pixels instead.

How can I display this <img> using the "em" unit?

Answer

bjelli picture bjelli · Aug 11, 2009

Use this code:

<html>
  <body>
    <p>This is 10em x 5em</p>
    <div style="width:10em; height:5em;">
    <img style="width:10em; height:5em;" src="logo.png" />
    </div>
  </body>
</html>

It works in Firefox 3.5, Internet Explorer 8 and Opera 10.0 Beta on Windows XP.

Related questions

How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More
Responsive image align center bootstrap 3

I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. I want to put the image in the center of the …

Read More
CSS Display an Image Resized and Cropped

I want to show an image from an URL with a certain width and height even if it has a different size ratio. So I want to resize (maintaining the ratio) and then cut the image to the size I …

Read More