Image size gets enlarged and distorted on retina screens

update – I think what the carousel is doing is fetching the original image size on retina screens.

Unfortunately this makes a mess of my carousels which have images of variable widths so all images are constrained to a particular height. eg 400px.

I would like retina screens to maintain this height as well. How can I ensure that retina screens use the correct image size?

I’ve solved it with this code in my css file.

But this seems messy and I’d like to hear how the plugin authors would have solved this.

@media  only screen and (min-device-pixel-ratio: 1.5),
        only screen and (min-resolution: 192dpi) {
.wpsisac-slick-carousal-1 {max-height: 425px; }
.wpsisac-slick-carousal-1 .slick-track {max-height: 400px;}
.wpsisac-slick-carousal-1 .slick-track img {max-height: 400px; width: auto;}
}