How do I make an image smaller with CSS

Question

I have this page and I have users uploading an icon image for the industries and they are uploading a bigger image  I want to resize it via CSS and it s cutting it when changing it in Firebug  To see what I mean  select  retail  from the top dropdown  Select Industry Category  and then select  General  from  Select Business Type  and you will see the oddly shaped image  It needs to be 56 nbsp pixels   52 nbsp pixels   Here is my HTML    lt span class  icon select-business-icon  style  background-image  url http   posnation com shop possystems image data icons retail png    gt  amp nbsp  lt  span gt     I tried in the CSS to set the width and height to the desired measurements  but all it did was truncate the image and not resize

User · Answer

You can resize images using CSS just fine if you're modifying an image tag:

<img src="example.png" style="width:2em; height:3em;" />

You cannot scale a background-image property using CSS2, although you can try the CSS3 property background-size.

What you can do, on the other hand, is to nest an image inside a span. See the answer to this question: Stretch and scale CSS background

User · Answer

You can try this   -ms-transform  scale width height      IE 9    -webkit-transform  scale width height      Safari    transform  scale width  height     Example  image  grows  1 3 times  -ms-transform  scale 1 3 1 3      IE 9    -webkit-transform  scale 1 3 1 3      Safari    transform  scale 1 3 1 3

User · Answer

CSS 3 introduces the background-size property  but support is not universal   Having the browser resize the image is inefficient though  the large image still has to be downloaded  You should resize it server side  caching the result  and use that instead  It will use less bandwidth and work in more browsers

User · Answer

Here s what I ve done    resize       width  400px      height  auto      resize       width  300px      height  auto      lt img class  resize  src  example jpg   gt    This will keep the image aspect ratio the same

[html] How do I make an image smaller with CSS?

Examples related to html

Examples related to css