Expression – make full-height slideshow always display the image in full size

Please Note: Theme customizations go beyond the scope of our support services and this article is provided solely as a courtesy to our customers. Please take a moment to review the Scope of our Support.

In the full-height slideshow, when the window width is smaller than the image height, the image left and right sides get hidden. If you want to display the image always in its full size without any cropping from the sides, you can insert the following CSS into the Expression Options -> Styles -> Additional Styles section:

#full-height-slider img{
max-width:100% !important;
left:0 !important;
height:auto !important;
max-height:100% !important;
}

this will limit the image size to the maximum size of the window.
This modification may cause gaps below the image as it won’t be displayed to its full height anymore. If you want to center the image vertically after this, in the js/main.js file in the bottom of both the resizeImage (line 488) and centerImage (line 523) functions you have to insert this code:

if($img.height() < currentHeight){
$img.css({marginTop:(currentHeight-$img.height())/2});
}else{
$img.css({marginTop:0});
}