HTML CSS - Image Resizing

Question

If I have an image - let's say 20 * 20 pixels

I can use this line to resize the image - this will reduce the whole image:

<img src="images/online-dating-main/blinking smile14x14.gif" width="14" height="14"/> 

How to do it using CSS?

I tried this, but it just crop the image:

  <div id="smile"></div> div#smile { background: url(../images/online-dating-main/smile.gif) no-repeat 0 0; width: 14px; height: 14px; } 

How to resize using CSS?

THX

Answer 1

Add background-size: contain; to the div#smile selector.

jsFiddle .

Please note that browser support may be a problem. IE <9 does not support this property.

Answer 2

Resize img instead of using background image?

  <img class="resize" src="images/online-dating-main/blinking smile14x14.gif" /> 

CSS

 .resize { width: 14x; heigh: 14px; }