homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS to resize image

 4:40 pm on Sep 14, 2008 (gmt 0)

Is it possible to use CSS to specify the size of an image?

Lets just say I have an image that I use to expand a table- <img =src="/clr.gif" width="175px" height="1px">- the original image is a 1x1 gif.

Is there a way to put the width and height into css? Will it be consistent and work for all (or most) browsers?





 5:19 pm on Sep 14, 2008 (gmt 0)

If you specify image sizes in ems, rather than pixels, then there is some ability to resize them through css (although I am not sure in the way you are asking).

Do a search for image size in ems for more info.


 5:23 pm on Sep 14, 2008 (gmt 0)

Thanks... I will try the search.

What is an "em"?


 6:59 pm on Sep 14, 2008 (gmt 0)

The short answer is that an em is the width of an uppercase M for the font being used; a standard printing measure borrowed by the internet. The long answer is considerably more complex and the 'correct' definition can vary.

For CSS purposes, and the rendering of pages, the em unit of measurement is valuable because it scales reliably.

IMO, CSS is best used to specify the actual size of an image, not to manipulate (typically to a minor degree) the image. The point is to 'block out' the appropriate amount of space of the actual image size as the page is rendered.

For the example cited in OP, I would set the width and/or height of the container and use the image as a background-image: and simply let it repeat to fill the space.

Stu Nicholls at CSS Play, bigbaer, among others, have worked with displaying images and using ems to affect the display size, but I haven't been sold yet that this is especially useful. Typically, I don't care if the image scales with the text, and if wanting to offer multiple sizes then I go with a link to a large version, a hover option, or some other method of offering the large version.


 7:59 pm on Sep 14, 2008 (gmt 0)


Thanks- that makes sense... size of a specific character would scale.. makes sense in my mind. Might actually be usefull, as I use the cl.gif to go the width of the frame, if the text doesn't, to keep the width exactly what I want. So I can print a bunch of upper case "M"'s to the exact width I want, and use that number I guess.

I found this:

img.cl175 {/* scalable em size class 1 x 175 graphics */
width: 175em;
height: 1em;

then use: <img class="img.cl175" src="...">

and that seems to be what I want.

I am using it for slightly nefarious purposes.... on MY site, the clear.gif shows. But my info, pictures and such get used a LOT on eBay auctions... so if the referrer is eBay, the image is replaced with an annoying image. But when I specify a width and height... that image is not readable. By doing this way, I can have it "my" size on my page... but eBay does not have my css, so the image would render full size and be readable on the auction.


 8:33 pm on Sep 14, 2008 (gmt 0)

I see where you are going now. YOUR purposes are not nefarious. Not sure I'm sold on using clear gif 'cover image' techniques.

If a big problem, this will probably stop only a small percentage of that. Most people are going to download the actual image and use it - not just hotlink.

Sounds like 'branding' or watermarking your images might be necessary. That will move most people on to an easier and quicker target to take the image from and minimize the actual problem. Otherwise, you are going to have to continually monitor hotlinked images, rotate in replacements....and this doesn't do anything to stop those who are downloading the actual image and serving it up themselves.

How big a problem is it? How much and how long are you prepared to go round the same circle? Seems like you need to become less of a primary 'go to' target.


 11:54 pm on Sep 14, 2008 (gmt 0)


What is primarily used is the information from my site- they highlight cut and paste. Sometimes the image, too... more often than not it is the TEXT they are taking. So I want to use that as a chance for a little bit of free advertising... "Find out more about this Blue widget... and other widgets... at www.widgets.com"

So when they take the text... and they do, 2-3 new ones a week- the image gets Cut and Pasted with it. Just trying to make the best of an awkward situation!

Image watermarking would do little to help. With widgets, you see, most customers want to see the widget in question, not a generic widget... so it is not MY [real] images that are used.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved