Demo (Slideshow with height breakpoints using CSS media query):


CSS and Initialization Code:


#fadeshow2 .gallerylayer img{
width: 100%;
height: auto;

@media screen and (max-width: 860px){ /* when document is 860px or less */
height: 573px !important;

@media screen and (max-width: 600px){ /* when document is 600px or less */
height: 400px !important;

@media screen and (max-width: 480px){ /* when document is 480px or less */
height: 320px !important;


<script type="text/javascript">

var mygallery2=new fadeSlideShow({
 wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
 dimensions: ['100%', 800], //width/height of gallery in pixels or "percentage" (for fluid dimensions).
 imagearray: [
  ["fullpageslideshow/img/img3.jpg", "", ""],
  ["fullpageslideshow/img/img5.jpg", "", ""],
  ["fullpageslideshow/img/img2.jpg", "", ""],
  ["fullpageslideshow/img/img0.jpg", "", ""] //<--no trailing comma after very last image element!
 displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 500, //transition duration (milliseconds)
 togglerid: ""


Images used: