BHS DESIGN - CSS classes to resize images

Page Info

Page Title: CSS classes to resize images
Description: How to resize too big images to the max sized allowed with CSS
Author: Dumb Genius
Submission Date: 29-07-2004 14:26

Rating & Comments

View or add comments:

(0)
Average members rating:

Here is the code that you can use to resize your images automatically by using CSS

Code :
// hide source code
// hide line numbers



1  .sig img        { max-width: 400px; max-height: 80px; letter-spacing: expression(((this.width>400)?this.width=400:null)?"normal":"normal"); word-spacing: expression(((this.height>80)?this.height=80:null)?"normal":"normal");}
2  
3  .avatar img    { max-width: 80px; max-height: 80px; letter-spacing: expression(((this.width>80)?this.width=80:null)?"normal":"normal"); word-spacing: expression(((this.height>80)?this.height=80:null)?"normal":"normal");

Change the values in px to what you need. For each class, you need to give the same values for all the widths and all the heights.

Each class, that you can rename as you want, can be applied to a div.

For example:

Code :
// hide source code
// hide line numbers



1  <div class="sig"> HTML code here </div>

If your HTML code contains some images, they will be resized to what you defined in the CSS.

Donation:

If you like our free quality work, make a donation by using Paypal and tell us what you would like to see improved on our site for the next few months.