restrict the maximum size of an image

/ Published in: CSS
Save to your folder(s)

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 ).

Copy this code and paste it in your HTML
  1. @charset "utf-8";
  2. /* CSS Document */
  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 */
  11. * html .class {
  12. height: 50px;
  13. width: 50px
  14. }


Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.