Jump to content

Scaling images placed using content:url()


Guest SomeThingKindaWierd
 Share

Recommended Posts

Guest SomeThingKindaWierd

I found this great article about using em values to allow an image to scale:http://www.bigbaer.com/css_tutorials/css.s...ml.tutorial.htmThe gist of it is you can make a CSS class for an image that defines height and width using em values so the width & height of the image scales dynamically with the fonts, like this:

img.g200 {/* scalable em size class 200 x 200 graphics */	  width: 7.5em;	  height: 7.5em;}

My question is - when I use the "content" property to dynamically place an image like this:

#sitemap ul li a[title~="Collage"]:before {	 content:url(SiteMap_assets/collage_icon.png);	 padding-right: 0.7em;}

how can I use CSS to set its width and height of the "collage_icon.png" image? Everything I try fails to affect the image at all.If I do this:

#sitemap ul li a:before {	 border-style: outset; 	 color: silver;}

It will cause a box to be drawn around the image, but I still cannot change the width and height.Any ideas?Thanks for taking the time!

Link to comment
Share on other sites

I don't think you can do it. Quote from http://www.w3.org/TR/REC-CSS2/generate.html:

Note. CSS2 offers no mechanism to change the size of the embedded object, or to provide a textual description, like the "alt" or "longdesc" attributes do for images in HTML. This may change in future levels of CSS.
Anyway, I don't think "before" and "after" work at all in IE: http://www.w3schools.com/css/css_pseudo_elements.asp :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...