Solved

CSS how to scale image to 50px by 50px

Posted on 2011-09-08
6
463 Views
Last Modified: 2012-05-12
Please can someone advise how I should modify the below css to scale my image down to 50px by 50px. the reason we don't want to use a 50px by 50px native image is so we can preserve the quality of the image edge for transparency to be effective.

	.mstrLogo {
		background: 		transparent url(images/project.gif) no-repeat scroll center;
	}
	A.mstrLink:hover .mstrLogo {
		background-image: 		url(images/project.gif);
	}
	* HTML .mstrLogo {
		filter: 		progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../plugins/ReplacingMicroStrategyWebButton/style/images/project.gif', sizingMethod='scale');
	}
	* HTML A.mstrLink:hover .mstrLogo {
		filter: 		progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../plugins/ReplacingMicroStrategyWebButton/style/images/project.gif', sizingMethod='scale');
	}

Open in new window

0
Comment
Question by:regnighc
6 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36503365
why not simply mention the height and width as 50px?
0
 
LVL 2

Author Comment

by:regnighc
ID: 36503506
Sorry I cant work out how todo that First time ive played with css this is a premade file
0
 
LVL 13

Expert Comment

by:haloexpertsexchange
ID: 36503558
is this a background image that you want sized?
if so then look at this link http://stackoverflow.com/questions/1341358/set-size-on-backgroundimage-with-css
You can size a background image for browsers that are css3 compliant with the background-size but that does not work with most browsers so your best bet would be just to re-size the image before use.
Otherwise there is the normal width and height that you can set with css to size anything else.
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 36514798
<IMG src="mythumb.jpg" width="50 px" height="50 px">  that is the HTML
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 37343905
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now