Code to specify a max size an image can reach

  • the_hero
  • Born
  • Born
  • the_hero
  • Posts: 2

Post 3+ Months Ago

I need a code for html, css, or jsp that will help me with the following.

We have a site where people can create their own web pages. They can also insert images onto their webpages. Their images are al sorts of sizes.

So here is the problem. We have a code to insert their image and I can control the size of the image. I can only specify a either a height and not width or width and not height because the images they insert will not all be the same size and a fixed size in the tag will distort the image.

Also, all the images are set into cells that have background images (I generated all the wegpages from Photoshop using splices). When the image is too large either by width or height it pushes the cells and all the background image get messed up.

So I have set height or width sizes to all the images. It works fine if the image is not too large on the uncontroled size value.

For example, lets say I hae a cell 55px by 150px. I set the height at 50px so it doesn't exceed the 55px height. let's say a user inserts an image 50px by 175. That will push the cell and screw up the page.


Does anyone know how to set a max size that it can't exceed? Like no taller than 50px and no wider than 145px but keep the aspect ratio?


Thanks!

The_Hero
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

You can make this universal... simple css.

Code: [ Select ]
img {
max-height: 50px;
max-width: 145px;
}
  1. img {
  2. max-height: 50px;
  3. max-width: 145px;
  4. }
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

Bogey is absolutely correct, if your image is more specific, so let's say you want to target only images within the "clientbody" div, you can add the following CSS:
Code: [ Select ]
div#clientbody img
{
max-height:50px;
max-width:145px;
}
  1. div#clientbody img
  2. {
  3. max-height:50px;
  4. max-width:145px;
  5. }
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Note that if you still have a large number of visitors using IE6, the max-* CSS isn't going to do any good for those visitors since support for those properties started in IE7.

The good news is every common, up to date browser supports them.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 26 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.