Slideshow With Random Image Sizes

[son]

I am working with a new slideshow where the images can be landscape, square or portrait. They will be randomly loaded and as I cannot rely on any size I am not sure how to best deal with this. Did anyone of you come across a similar problem and if yes, what did you decide to do about it? Thanks,Son

[justsomeguy]

You either need to restrict the size and dimensions, or plan for it in your layout.

[dsonesuk]

To stop your content jumping up and down as your images change from landscape to portrait set the image to a fixed height, it would not matter about the width. OR a better alternative would be to set a fixed height for viewing screen, if the height of image exceeds this view screen adjust the image height, else use original height, this will prevent distortion of smaller images, which would happen in my first option.

[son]

So, you manipulate images with php when you load them from server for display? Or do you do this better with Javascript? Thanks,Son

[dsonesuk]

I used php using getimagesize(), you retrieve the height, if its smaller use its original height, if larger change to the restricted height. I think I stored the image filename, and image size in separate javascript arrays, and used the index value to retrieve filename, and its original or adjusted height values from both arrays.

[Ingolme]

I think it's easier to apply a max-height with CSS. If the image is smaller than the max-height then it won't be resized.

[dsonesuk]

True, but with this method i was able to calculate the margin , to display the images in dead centre of the view screen area.

[son]

Gosh, lots of different approaches to think about. As for the method with 'max-height with CSS' I am not sure what this means. Simply declare a max-height (and/or width) and then images is re-sized in pure css accordingly? Is this what you mean. I would not have thought this possible... Son

[Ingolme]

CSS will size all images larger than the max-height to the max-height. To vertically center it, I'd just use line-height and vertical-align: Simple image gallery box:

.gallerybox {   height: 500px;  line-height: 500px;  text-align: center;}.gallerybox img {  max-height: 450px;  vertical-align: middle;}

The only drawback being that you can't have anything below or above the image inside that box, but you can put things outside the box.

[son]

That is not an issue. I do not need anything above or below within the box. I only display some text in div that is absolutely aligned with the relative box (on top of the box with a higher stack order). Think that is what I need... Many thanks,Son