Javascript 全屏滑块图像显示为裁剪

我放在网站上的全屏滑动图像似乎在各种平台（手机、小屏幕等）上被部分裁剪。我正在尝试在我的主页上调整和扩展它，希望它在任何平台上看起来都一样（全尺寸）。根据我在网上的搜索尝试了许多方法，但找不到任何解决方案

以下是代码的一部分：

<section class="bannercontainer">
        <div class="fullscreenbanner-container">
            <div class="fullscreenbanner">

                <ul>
                    <li data-transition="parallaxvertical" data-slotamount="5" data-masterspeed="1000" data-title="Slide 1">
                        <img src="~/img/index/slider/slider-05.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center" data-bgrepeat="no-repeat" >

以下是它现在在手机上的外观： 下面是它现在在chrome浏览器上的外观： 以下是真实尺寸的图像：

---

不确定您是否可以在这里获得完美的效果，但您是否尝试过backgound size cover属性？

---

你可以试试“背景尺寸：封面”来做这个

语法

background-size: auto|length|cover|contain|initial|inherit;

所附链接包含示例代码供您参考

---

希望这有帮助。

首先，我会删除手机上的滑块，我的大多数客户要求我删除较小分辨率上的滑块，因为滑块内容通常不像在较高分辨率上那样可见。第二个解决方案是使用不同的滑块图像，以便更好地适应手机。目前，在像360px这样的较小分辨率上，横幅上的优惠没有那么明显。像1920年那样分辨率更高的问题是图像太小。例如，第一个图像是1200x600px，其他3个图像是1000x500px。默认滑块高度为745px。这就是为什么图像看起来不好。尝试将图像放大以适合滑块容器，您应该完成一半的问题：）

请提供与图像相关的css代码。@Sinisa我也添加了css

div {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

background-size: auto|length|cover|contain|initial|inherit;