光滑的滑块高度不均匀

Question

我正在尝试创建一个光滑的滑块。我能够使用相同高度和宽度的图像正确创建它。但是现在的问题是，当我尝试上传高度小于或大于其余图像的图像时。下面是它的外观

下面是我用来构造滑块的初始化

<ScrollViewer 
    HorizontalScrollBarVisibility="Auto"
    VerticalScrollBarVisibility="Disabled">
    <StackPanel Orientation="Horizontal">
        <Label>Item 1</Label>
        <Label>Item 2</Label>
        <Label>Item 3</Label>
        <Label>Item 4</Label>
        <Label>Item 5</Label>
        <Label>Item 6</Label>
        <Label>Item 7</Label>
        <Label>Item 8</Label>
        <Label>Item 9</Label>
        <Label>Item 10</Label>
    </StackPanel>
</ScrollViewer>

关于如何解决此问题的任何想法？非常感谢您的帮助

更新：

这是我的HTML标记。我正在使用.net cshtml文件格式

$sliderWrapper
.on('init', function (event, slick) {
    $sliderWrapper.addClass('slick-slider-init');
})
.slick({
    accessibility: true,                    
    arrows: true,
    infinite: true,
    speed: 600,
    slidesToShow: 3,
    slidesToScroll: 3,
    lazyLoad: 'ondemand',
    centerMode: true,                    
    responsive: [{
        breakpoint: 1501,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 2
        }
    }, {
        breakpoint: 901,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 2
        }
    }, {
        breakpoint: 601,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false
        }
    }]
});

Answer 1

尝试一下

 In Your CSS File

.product-item__inner {
 height:
 width: 
} 

.product-item__inner img {
 max-height:100%;
 max-width: 100%;
 min-height:100%;
 min-width:100%;
 object-fit:cover;
}