The image does not expand inside the container, only a part of it is visible

I want to show more than one images in a container and put left and right swiper for make switch between images.

But only the upper left corner of the images is visible, it does not spread to the entire container.

I tried some things on object-fit parameter like contain, fill and some others and play with width and height values but cant find a solution.

How can i fix it?

Current Output :
image of problem
Expected Output :

I expect the image full fills the container the container it is in.

Here the html and javascript codes, I’m working on ASP.NET Core MVC :

//HTML CODES

    <div class="swiper-wrapper">
        @foreach (var homeModelProjects in Model.Projects)
        {
            <div class="swiper-slide">
                <div class="testimonial-item">
                    @{
                        // Split the ImagePaths string into an array of image URLs
                        var imageUrls = homeModelProjects.ImagePaths.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
                    }

                    <style>
                        .swiper-container {
                            width: 100%;
                            height: 300px; /* Set the desired height */
                            overflow: hidden;
                        }

                        .swiper-slide {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 100%;
                            height: 100%;
                        }

                            .swiper-slide img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: center;
                            }

                    </style>



                    <!-- Swiper container for images -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <!-- Loop through each URL and create a swiper-slide -->
                            @foreach (var imageUrl in imageUrls)
                            {

                                <div class="swiper-slide">
                                    <img src="@imageUrl" alt="">
                                </div>
                            }
                        </div>                                       
                        <!-- Add navigation buttons -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>

                    <h3>@homeModelProjects.Name</h3>
                    <a href="@homeModelProjects.GithubLink" target="_blank">
                        <h4>@homeModelProjects.GithubLink</h4>
                    </a>
                    <p>Kullanılan Teknolojiler : @homeModelProjects.UsedTechs</p>
                    <p>@homeModelProjects.Description</p>
                </div>
            </div>
            <!-- End testimonial item -->
        }
    </div>

    <div class="swiper-pagination"></div>
</div>

//Javascript Codes

<script>
    const mySwiper = new Swiper('.swiper-container', {
        // Optional parameters
        direction: 'horizontal',
        loop: true,
        speed: 300,
        mousewheel: true,
        coverflowEffect: {
            rotate: 30,
            slideShadows: true
        },
        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })

</script>