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**
  }