How to reduce image using CSS?

Question

I have this page and I have users uploading icon images for industries and they are uploading a larger image. I want to change it using CSS and cut it off when changing it in Firebug . To understand what I mean, select "retail" from the top "Select Industry Category" drop-down list, and then select "General" from "Choose a Business Type" and you will see an image with an unusual shape. It should 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 CSS to set the width and height of the required dimensions, but all that was done was trimming the image, not resizing.

Answer 1

Here is what I did:

 .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

CSS 3 introduces the background-size property, but support is not universal.

When resizing the browser, the image is inefficient, but a large image needs to be uploaded. You should resize its back end (caching the result) and use this instead. It will use less bandwidth and work in more browsers.

Answer 3

You can resize images using CSS just fine if you change the image tag:

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

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

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

Answer 4

You can try the following:

 -ms-transform: scale(width,height); /* IE 9 */ -webkit-transform: scale(width,height); /* Safari */ transform: scale(width, height); 

Example: the 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);