Posted By

scopefragger on 09/01/09


Tagged

width image size max height grow


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

scopefragger


restrict the maximum size of an image


 / Published in: CSS
 

URL: http://www.scopesden.co.uk/code_snipit.php?id=

Ever needed to restrict an images size? Or stop it from growing best the size of your div/table. It’s a horrible feeling when you see your nicely designed site get trashed by a single image because it’s a pixel or two too big! And if it’s a photo or a desktop image it may not always be appropriate to cut it down. The following can be applied to a class or id to limit the maximum size of an image. Please remember that applying both a height and a width restriction will resize the image completely, however just applying height or width will keep the image in its normal shape ( ie change 10x20 to 5x10 ).

  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. .class {
  5. /*The following will work in almost all browsers*/
  6. max-height:50px;
  7. max-width:50px;
  8. }
  9. /*Now becuse we know IE6 is a pain in the backside it needs it own slice of code */
  10.  
  11. * html .class {
  12. height: 50px;
  13. width: 50px
  14. }

Report this snippet  

You need to login to post a comment.