Jssor - how to keep image aspect ratio?

Question

Sometime photo aspect ratio is not same as slide container, I see that photo will be stretched to fill all the container space.

Is there any option to avoid this, to make photo aspect ratio not changed? Surely that there will be some blank space, but shapes in photo are not changed.

Answer 1

Please set $FillMode option, 0: streach, 1: contain, 2: cover, 4: actual size, 5: contain for large image and actual size for small image.

The value 1 or 2 or 4 will be good choice to keep aspect ratio

<script>

    jQuery(document).ready(function ($) {
        var options = {
            $FillMode: 1,                                      //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actuall size, 5 contain for large image and actual size for small image, default value is 0
            $AutoPlay: true,                                   //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $DragOrientation: 3                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);
    });
</script>

Reference: Jssor Slider Options