Slick: Scale down image height - keeping the aspect ratio

[chrisdemetriad]

I have a few slides, each composed of a big image (400px height) and couple of small (200px height) floated ones, but this is not relevant at this point as this happens with only one image per slide too (jsfiddle example at the bottom).

When Slick gets initialised, it sets the height of the biggest image on .slick-list container (400px in my case).

When I resize down, so if less than 600px, you would normally expect the images to shrink accordingly (using img{max-width: 100%;height: auto;}) as their width changes, keeping the ratio but it doesn't, I think it's because the set height in the container (.slick-list).

So the width changes (slightly as parts of the images get hidden too) as there's no set width on the containers but the height stays the same.

How would I go about this please?

This is an EXAMPLE ON JSFIDDLE.

p.s. Using v1.3.15, Chrome 39.0.xx.

Fantastic work btw, Ken.

[hultberg]

You can set the height on the slick container and each slide. If you want the image to be scaled/floating you can make it a background on a div that is position absolute in the slide. I can show you by jsfiddle if you want to.

[chrisdemetriad]

But that's the thing, I don't want slick to set the fixed height on the container so my slide's images get resized keeping the aspect ratio properly, so when the width changes the height should change accordingly.

Not the best option but if I add the images via background in css on an absolute positioned div, that will also need to have height/width, right?

[hultberg]

Yes, but I'm confused. Do you want the slides to have the same height as the image or fixed height on the hole slide and do as I said in the other comment?

[chrisdemetriad]

No, I do not want slick to set any height on the container so the images will scale down responsively.

[hultberg]

You can force height on each slide by javascript, just loop all slides > find imgs > set height with image height.

[kenwheeler]

The variableWidth option is what prevents your height from scaling