Comments on: Resizeable Images (At Full Resolution!)

By: CSS Tutorials - webdesignr.de

CSS Tutorials - webdesignr.de — Mon, 02 Feb 2009 15:54:14 +0000

[...] Tricks: Resizeable Images (At Full Resolution!) – Ein einfacher aber wirkungsvoller [...]

By: Steward

Steward — Thu, 03 Apr 2008 09:47:57 +0000

Yeah…. but 150 kb image size…. what can I say…. ))) thats sucks )))

Sun, 30 Mar 2008 00:23:39 +0000

[...] ÑÑ‚Ð°Ñ‚ÑŒÐ¸: Resizeable Images (At Full Resolution!)Popularity: [...]

By: TwoHawks

TwoHawks — Tue, 19 Feb 2008 03:22:21 +0000

Thanks Chris – nice.

Per Anders comment #6… although you would need to use some php or something to get around inserting inline tag code …one can go ahead and specify the W+H, then add style=”width:Wem;height:Hem;” into the img tag. Of course, then using the ‘class style’ Chris made is not needed either.

For those interested, I set up my em resolutions to 10px (search the net for pixels to ems) so I do not have to calculate the equivalent Wpx value into a weird em value, so all I have to do is if the image drops in at Width=560 and Height=601, the em’s I set are width:56;height:60.1, and it works great. That’s 1 to 1 ratio… it can, of course, be adjused to anything you want.

Just to note, I tried dozens of ways to try to allow for specifying the H+W in the img tag and doing the rest from the style sheet, but I do not think its possible.

By: JB

JB — Fri, 15 Feb 2008 16:50:22 +0000

It’s a nice trick. I’ve used this technique alot in the past, though I would (personally) would never use a full size image. Not a negative, it just seems that if the point is to enhance the user experience for visually impaired users who would enlarge their font size manually, they’re probably more interested in the content than downloading a high res image. I think there are plenty of uses for this (artist sites come to mind), but I feel that having high resolution images scaled down through CSS is something that should probably be used judiciously. In general, its a great trick and if you combine it with the old zoom layout techniques, you can get a really nice layout that fully resizes in most browsers (even in IE5).

By: Siegfried

Siegfried — Fri, 08 Feb 2008 13:36:09 +0000

I often combine this with max-width set so the maximum physical size and min-width set to half the physical size (in pixel this time). Does not work with IE

By: Links of Interest - CSS-Tricks

Links of Interest - CSS-Tricks — Mon, 04 Feb 2008 18:18:46 +0000

[...] of resizeable… This is years old but its like my example of resizeable images only with an entire web layout. Again, I realize that FF3 and the new Opera are already doing this [...]

By: Weekend Links - Javascript Favelets, Prototype Cheat Sheet, Reverse IP Domain Check, Resizable Images, ICANN Domain Tasting

Sat, 02 Feb 2008 22:47:30 +0000

[...] http://css-tricks.com/resizeable-images-at-full-resolution/ [...]

By: Tino

Tino — Fri, 01 Feb 2008 15:43:44 +0000

a very simple solution and quite effective, thanks for sharing.

By: Chris Coyier

Chris Coyier — Wed, 30 Jan 2008 21:47:41 +0000

@Tomek: Thanks for creating those screenshots! That is really interesting. I am not seeing those results exactly, although I think I was doing so much text resizing creating this that I think I didn’t realize how small the “real” default was. I think if you kick it up one notch, the cross browser results are a lot better.

@Dennison: Yes, it does bloat size, but it doesn’t have to be as drastic as this example. Just enlarging enough for one solid notch up would generally be fine I guess. People generally don’t need to view body text at 72 pt =) And thanks for that link! That is an awesome example of using this in a real layout.

@Jermayn: I’m actually not sure about IE7, but I know that the latest version of Opera and Firefox both have built in image enlargement, and it works very well. So, this is probably pretty much an outdated technique. I just thought it was kinda cool….