You can achieve this by using media queries and the CSS background-size property.
Here's an example code for two sizes so that you can see what I mean:
@media only screen and (min-width: 768px) {
/* Probably there are more classes, but I haven't discoverd them yet */
#slider,
#slider .mcSlc, #slider .mcBox {
/* This would change based on your original images size */
/* First argument is width, second is height */
background-size: 739px 83px !important;
}
}
@media only screen and (min-width: 1050px) {
#slider, #slider .mcSlc, #slider .mcBox {
/* Images would be in their full size */
background-size: auto !important;
}
}
What the above code does is that it shrinks down the background image for the elements that create the effects - it depends on you calculating the scaled sizes of the images, but it works for me.
In my case the original images are 1024 x 115px, so when the width is scaled down to 739px, their height should be around 83px.
Note, that this won't work in IE8 and lower, but:
- Your desktop layout(that should work on IE 8) should contain the full-sized image slider
- Media queries don't work on IE 8 without a polyfill
Hope that helps to someone!