Full-height slideshow/slider: make the image not resize more than its default 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, the image is always displayed so that its height fills the height of the empty space in the window. If you want to stop this behavior and display the images in a size not bigger than their real size, you can insert the following CSS into the Theme options page -> Styles -> Additional Styles section:

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

this will limit the image size to the maximum size of the image.

If you want to apply this modification for the Full-height gallery slider in Expression theme, you can use the following CSS instead:

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

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});
}