Question

How would I go about creating a full width slideshow which keeps its height proportional to the width?

So I have my css to create my full width image keeping its proportion:

#featured-slideshow {
    width: 100%;
}
#featured-slideshow .slideshow {
    width: 100%;
}
#featured-slideshow .slideshow img {
    width: 100% !important;
    min-height: 300px;
    min-width: 892px;
}

And the mark up is:

<div id="featured-slideshow">
    <div class="slideshow">
        <img src="images/slideshow/image-1.jpg" />
        <img src="images/slideshow/image-2.jpg" />
        <img src="images/slideshow/image-3.jpg" />
    </div>
</div>

The issue I’m having is as soon as I apply a jquery plugin to this such as jquery cycle, it cant rework out the width and height once you start scaling the window.

Any help would be greatly appreciated – I’m open to using other slideshow plugins or solutions.

Many thanks

Answer 1

Most jquery slideshows should be compatible with the media attribute for referencing different stylesheets for different sizes of screen.

<link rel="stylesheet" media="screen and (min-width: 1431px) and (max-width: 1799px)" href="css/stylefifteen.css">

Therefore, set different sizes of slideshow for 13, 15, 21, and 27 size screens, and in each stylesheet make sure the slideshow frame as well as the img class resizes accordingly.

A demo can be seen here (non-working website – reference purely for this example) – drag the screen to different sizes and the slideshow should resize accordingly happily from a 13″ all the way to a 27″ screen.

Scaling slideshow example

I have found this much better than trying to get an ‘on the fly’ solution that rescales it like supersized (supersized IS great for background images though)