The size of the thumbnails varies from one another.

[saimow]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.6.12

Description

I created a thumbnail Carousel using this package and everything seems to work fine.

But since I am passing images with different sizes to the component, I noticed that the thumbnails size also varies from one another as you see on the image below.

This is how I'm using the component:

<template>
    <div class="slider-container">
        <div class="wrapper">        
            <Splide
                aria-labelledby="thumbnail-example-heading"
                :options="mainOptions"
                ref="main"
            >
                <SplideSlide v-for="slide in slides">
                    <img :src="'/storage/products/media/'+slide.name">
                </SplideSlide>
            </Splide>
        
            <Splide
                aria-label="The carousel with thumbnails. Selecting a thumbnail will change the main carousel"
                :options="thumbsOptions"
                ref="thumbs"
            >
                <SplideSlide v-for="slide in slides">
                    <img :src="'/storage/products/media/'+slide.name">
                </SplideSlide>
            </Splide>
        </div>
    </div>
</template>
  
<script>
    import { Splide, SplideSlide } from '@splidejs/vue-splide';
    import '@splidejs/vue-splide/css';

    export default {
        props:{
            slides: {
                type: Array,
                default: []
            }
        },
        mounted(){
            this.$refs.main.sync( this.$refs.thumbs.splide );
        },
        data(){
            return{
                mainOptions: {
                    type: 'loop',
                    perPage: 1,
                    perMove: 1,
                    gap: '1rem',
                    pagination: false,
                },
                thumbsOptions: {
                    type: 'slide',
                    rewind: true,
                    gap: 5,
                    pagination: false,
                    fixedWidth: 110,
                    fixedHeight: 70,
                    cover: true,
                    focus: 'center',
                    isNavigation: true,
                    updateOnMove: true,
                }
            }
        },
        components: {
            Splide,
            SplideSlide
        },
    }
</script>

<style scoped>
.slider-container{
    width: 700px;
}
.splide__slide img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    
}
.splide--slide {
    margin-top: 0.5rem;
}
</style>

Reproduction Link

No response

Steps to Reproduce

1. setup the component as I mentioned in the issue description.
2. pass images with different sizes to :slides prop.

Expected Behaviour

The size of the thumbnails varies from one another.