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 pixels * 52 pixels.

Here is my HTML:

<span class="icon select-business-icon" style="background-image: url(http://posnation.com/shop_possystems/image/data/icons/retail.png);">&nbsp;</span> 

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.

Answer 1

Here's what I've done:

.resize {
    width: 400px;
    height: auto;
}

.resize {
    width: 300px;
    height: auto;
}

<img class="resize" src="example.jpg"/>

This will keep the image aspect ratio the same.

Answer 2

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

Answer 3

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.

Answer 4

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);