Keep DIV fixed height, allow image inside div to change - html

Question

What I am trying to do is have a container with a fixed height of 95% and a width of 100%. Then inside that div is an image with a variable height/width.
How would I go about keeping the container have a constant height/width but allow the image (changes with jQuery) to be any size smaller than the container and centered.
This is my current CSS that I have been playing around with but I havnt had any luck yet:
.gallery-image {
text-align:center;
line-height:0px;
min-height: 95%;
max-height: 95%;
width: 100%;
}
.gallery-image img {
max-height:65%;
max-width:95%;
}
Any ideas? Thanks.

Answer 1

Smaller than the container is relatively easy, you would just need to set the max-width and max-height styles --
max-width,
max-height
Centering is a little trickier; it will definitely involve some JavaScript. You will need to know the dimensions of the images (so if they haven't loaded you'll need to wait for them before you can read the dimensions), but assuming their dimensions are known here's an example method:
function centerImage(image,elem){ //elem is the parent container
var ratioDiff = (image.width() / image.height()) - (elem.width() / elem.height());
if(!isNaN(ratioDiff)){
if(ratioDiff > 0){
//center vertically - full width
image.css({width:elem.width()+'px',position:'relative'});
image.css({top:((elem.height() - image.height())/2)+'px'});
}else{
//center horizontally - full height
image.css({height:elem.height()+'px',position:'relative'});
image.css({left:((elem.width() - image.width())/2)+'px'});
}
}
}
This works by finding the ratio of height to width and scaling the image accordingly (setting left/top positioning where needed). It will basically always fill the image to the parent size and centered within the parent.
EDIT: I should mention this uses jQuery. You can accomplish it without (would just need to re-write the style setting and getting functions)... but why would you?