My issue involves extracting multiple images from Facebook and displaying them in a scroller. When clicked, a dialog box appears with the full-size image (the images initially displayed are thumbnails obtained from a Facebook query using `src_small`).
The problem is that I am unable to determine the size of the images before retrieval. Some images turn out huge while others are very small. To address this discrepancy and ensure that all images fit properly within the dialog box at a reasonable size, I attempted the following CSS adjustments:
/*
* Styling for large images in the dialog
*/
.DialogImagesBig
{
position: relative;
width: 95%;
top: 0px;
left: 10px;
}
/*
* Firefox specific styling
*/
@-moz-document url-prefix()
{
/*
* Additional adjustments for Firefox
*/
.DialogImagesBig
{
height: 95% !important;
width: 95% !important;
position: relative;
top: 0px;
left: 10px;
}
}
However, this approach seems to enlarge some images beyond their original size (larger images appear smaller, while smaller ones become pixelated). What might be causing this issue? How can I rectify it to ensure that all images fit appropriately within the dialog box without losing quality?
Edit: I have been advised to utilize Javascript (or jQuery) to resolve this. How should I proceed with implementing this solution?