Question

I have multiple images that I pull from facebook. They are placed in a scroller. When you click on the image a dialog appears with the actual image (The images in the scroller are thumbnail size, what you get from a facebook query with src_small)

I cannot determine the size of the images before I get them. Some are huge and others very small. To account for this (so all images fit in the dialog and are a reasonable size) I tried this:

/*
 * Image in the dialog div
 */
 .DialogImagesBig
 {
     position: relative;
     width: 95%;
     top: 0px;
     left: 10px;
 }
 /*
  * Firefox only
  */
 @-moz-document url-prefix() 
 {
     /*
      * Edits images for FF
      */
     .DialogImagesBig
     {
         height: 95% !important;
         width: 95% !important;
         position: relative;
         top: 0px;
         left: 10px;
     }
}

But it actually makes some images bigger then they are (Big images are smaller, but small images are bigger and pixelated). Why is that? How would I fix this so that all images fit in the dialog and are not pixelated?

Edit I have been told that I need to use Javascript (or Jquery?) to get this done. How would I go about doing that?

Answer 1

You can get the image width/height by doing this:

var img = new Image();
img.src = _image_src_

img.width // returns width
img.height // returns height

img // returns <img src="_image_src_" />

You can compare those values with the width/height of your dialog and do all the resizing you need, i hope this can help.

Example:

if (img.width > 100) 
  img.width = 100

$("#image_container").html(img)