CODEWITHSUNDEEP
javascriptjquerycssimage
Soatl
Soatl

Reputation: 10592

Why are these Images bigger then original size?

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?

Upvotes: 1

Views: 196

Answers (3)

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385108

A width/height of 95% means 95% of the parent element's width/height, not 95% of the image's original size.

Upvotes: 2

user571545
user571545

Reputation:

You could try this sort of thing:


h = $('#theimage').height();
w = $('#theimage').width();

if(h > 400 && w < 500) {
    $('#theimage').height(400);
    $('#theimage').width = w / (h / 400);
}
...
...

same for other comparisons, to shrink it down appropriately. I think the math is right there...

Upvotes: 1

Bernardo Mendes
Bernardo Mendes

Reputation: 1220

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)

Upvotes: 1

Related Questions