If you build websites that let users upload avatars or image and you wondered how facebook maintain that ratio for images? here is a css snippet that knows how to keep your avatars at ratio scaled to any size:

.avatar img
{
float:left;
vertical-align:middle;
margin-left:0px;
border: solid 1px #CCCCCC;
top:50%;
max-width:60px;
width: expression(this.width > 60 ? 60: true);
max-height:65px;
height: expression(this.width > 70 ? 70: true);
}

You can change the max width and height accordingly and change the width expression and the height expression to match it. works wonderful.


del.icio.us:Handy CSS trick i found on the web digg:Handy CSS trick i found on the web newsvine:Handy CSS trick i found on the web fark:Handy CSS trick i found on the web

COMMENTS / ONE COMMENT

sorry, but this is shitty method - it has 2 major flaws: 1 - using expressions in css, 2 - this scaling method trashes images. when i had to display various size thumbs, php & gd was a solution, and btw Facebook uses different size thumbnails scaled after you upload it, they dont stretch/shrink images like you show.

TIm added these pithy words on Jan 07 08 at 2:52 am

SPEAK / ADD YOUR COMMENT
Comments are moderated.

Return to Top

Handy CSS trick i found on the web

FRESH / LATEST POSTS

My Mobbroll



www.flickr.com

Tags


apple ,  asi dayan ,  auction ,  bill gates ,  bizwise ,  Bugile ,  bukaa ,  cloverfield ,  code ,  death ,  Deface ,  design ,  develop ,  digg ,  Disc review ,  domains ,  fashion ,  firefox ,  first timer ,  funny ,  geek ,  General ,  gizmos ,  gmail ,  google ,  great service ,  hackers ,  icq ,  idf pizza ,  instant messenger ,  israel ,  jj abrams ,  life ,  linux ,  metalist ,  microsoft ,  model ,  movie ,  music ,  negotiation ,  New start? ,  news ,  Nokia ,  nuclear ,  oron ,  peace ,  phising ,  poor ,  pub ,  review ,  security ,  selling ,  service ,  social ,  software ,  spam ,  ssl ,  starwars ,  stupid ,  terrorist ,  toaster abuse ,  tshirt hell ,  ubuntu ,  usability ,  useless id ,  web 2.0 ,  web savvy ,  Yeah right ,  zoho ,