If you specify only one dimension of an image, the browser will make the other proportional to it. So - say in the ddphpalbum.css file:
Code:
.photodiv img{ /*CSS for each image tag*/
border: 0;
width: 200px;
height: 106px;
cursor: hand;
cursor: pointer;
}
If you get rid of one of the highlighted dimensions, the images will all scale to the other.
Alternatively, you can use max-width and max-height instead of width and height:
Code:
.photodiv img{ /*CSS for each image tag*/
border: 0;
max-width: 200px;
max-height: 106px;
cursor: hand;
cursor: pointer;
}
This will specify a box that the image must scale into. However, IE 6 and less don't do max-width and max-height. But, if that concerns you, you may use a supplement stylesheet for IE 6 and less that defines these in terms of expressions, or simply uses the first method discussed above (specifying only one dimension).
To get a supplement stylesheet for IE 6 and less, place this on the page after the existing stylesheet link:
Code:
<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6_ddphpalbum.css" type="text/css">
<![endif]-->
Then in ie6_ddphpalbum.css put like:
Code:
.photodiv img{ /*CSS for each image tag*/
width: 200px;
}
Or even:
Code:
.photodiv img{ /*CSS for each image tag*/
width: expression(this.width < this.height? '200px' : 'auto');
height: expression(this.width >= this.height? '106px' : 'auto');
}
However, in IE 6, if you do this last, and there is an image(s) that is less than that size in both dimensions, it will be expanded to fit the box proportionally. If you have that situation and want it fixed, it can be done, so let me know.
Bookmarks