图像不会在容器内展开，只有一部分可见

Question

我想在一个容器中显示多个图像，并放置左右滑动器以在图像之间进行切换。

但是只有图像的左上角可见，它不会扩散到整个容器。

我在

object-fit

参数上尝试了一些东西，如

contain

、

fill

和其他一些东西，并使用

width

和

height

值，但找不到解决方案。

我该如何修复它？

电流输出： 问题图片 预期输出：

我希望图像充满它所在的容器。

这里是 html 和 javascript 代码，我正在研究 ASP.NET Core MVC :

//HTML 代码

    <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代码

<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>

Answer 1

一个简单的滑块可以纯粹用 CSS 实现。

.horizontal-slider {
  overflow: auto;
  display: flex;
  gap: 1em;
  padding-bottom: 1em;
  scroll-snap-type: x mandatory;
}

.horizontal-slider > * {
  scroll-snap-align: center;
}

<div class="horizontal-slider">
  <img src="https://picsum.photos/id/730/200">
  <img src="https://picsum.photos/id/731/200">
  <img src="https://picsum.photos/id/732/200">
  <img src="https://picsum.photos/id/733/200">
  <img src="https://picsum.photos/id/735/200">
  <img src="https://picsum.photos/id/736/200">
  <img src="https://picsum.photos/id/737/200">
  <img src="https://picsum.photos/id/738/200">
  <img src="https://picsum.photos/id/739/200">
  <img src="https://picsum.photos/id/740/200">
</div>