Question

我有一个网站，在主页面上有一个全屏图像。图像宽高比为16：9（1920x1080像素）。

现在，如果所有内容在屏幕上以16：9的宽高比显示得非常好，当我使用4：3屏幕运行此网站时（比方说：1280x1024px），我在图像下面有空白区域。

我正在使用skdslider。

包含图片的Div包含CSS：

.skdslider {
 width:100%;
 position: relative;
 display: block;
 overflow:hidden;
 height:100vh !important;
}

这是图片CSS：

.skdslider ul li img {
    width: 100%;
    height:auto;
    border:0;
}

元素层次结构如下所示：

.skdslider＆gt; ul＆gt; li> IMG

我想要实现的是在4：3宽高比屏幕上移除此空白区域。它就像 - 以某种方式在div高度之外缩放到这个内部图像高度，因此不会有白色间隙。

无法通过我所知的任何想法达到它。有什么建议吗？再次，我使用skdslider，优先级是16：9屏幕，其中图像是100％宽度/ 100％高度。在4：3的屏幕图像上，不要有100％的高度，但我需要以某种方式删除这个空白区域。