Advanced Search

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.