int img_height, img_width; //these are the unchaged height and width of the image
int img_height_new, img_width_new //the new height and width, after scaling
int div_h, div_w; //the dimensions of the container div
double img_ratio = img_h / img_w; //the ratio of the image
if (img_ratio > 0.5625){
img_height= (100%); //this will set the image height to 100% relative to the div
//now get the scaled width
double margin_left = ( (div_w - img_width_new) / 2 ) / img_width_new * 100; // and we have the left margin in percentage
=== SET img {margin-left: margin_left % ; margin-top: 0 } // we put margin-top to be zero
}
else if (img_ratio > 0.5625) {
img_width= (100%); //this will set the image width to 100% relative to the div
//get the scaled height
double margin_top = ( (div_h - img_height_new) / 2 ) / img_height_new * 100; // and we have the margin-top in percentage
=== SET img {margin-left: 0 ; margin-top: margin_top % } // we put margin-left to be zero
}
else {// we should make the image height and width 100% just in case the image is larger than the div
**CSS STYLES**
img_height = 100%; // again 100% is relative to the div
img_width = 100%;
margin = 0 ; //margin 0 to all sides
**END CSS STYLES**
}