Javascript 在第一个滑动滑动条中拉伸图像

我有这个光滑的滑块，我想在当前的第一张活动幻灯片中拉伸图像

我想这样做

例如，在这里，您希望看到这个示例。当前的第一个活动幻灯片是 伸展我怎么能在滑滑道上做到呢

$（文档）.ready（函数（）{
$（'.slider nav'）。光滑({
幻灯片放映：3，
幻灯片滚动：1，
点：是的，
centerMode:false，
焦点选择：正确
});
});
。滑块导航div{
宽度：200px；
高度：60px；
}
.滑块{
宽度：250px；
高度：250px；
边缘
}
.滑块包裹{
位置：绝对；
宽度：300px；
高度：300px；
左边距：20px；
}
.光滑的箭：之前{
颜色：灰色；
}

这里有一个您想要实现的工作片段，在本例中，图像大小为
400x600
，但由于我们使用的是
background size:cover
属性，因此图像将覆盖在整个


$（文档）.ready（函数（）{
$（'.slider nav'）。光滑({
幻灯片放映：3，
幻灯片滚动：1，
点：错，
centerMode:false，
焦点选择：正确，
});
});
。滑块导航{
高度：400px；
}
.滑块导航滑头列表{
宽度：100%；
身高：100%；
}
.滑块导航.平滑列表.平滑轨迹{
宽度：100%；
身高：100%；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：结束；
-ms-flex-align：结束；
对齐项目：柔性端；
}
.滑块导航.平滑列表.平滑滑块{
利润率：0.15px；
位置：相对位置；
身高：100%；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒式包装：结束；
-ms-flex-pack：结束；
证明内容：柔性端；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
}
.滑块导航.平滑列表.平滑幻灯片.幻灯片照片{
-webkit转换：1s立方贝塞尔（0.83,0,0.17,1）；
过渡：1s立方贝塞尔（0.83,0,0.17,1）；
背景位置：底部；
背景尺寸：封面；
身高：50%；
}
.slider nav.slick list.slick slide.slide photo:：after、.slider nav.slick list.slick slide.slide photo:：before{
底部：0；
宽度：0%；
高度：4px；
背景色：#ffbf00；
位置：绝对位置；
内容：''；
-webkit转换：1s立方贝塞尔（0.83,0,0.17,1）；
过渡：1s立方贝塞尔（0.83,0,0.17,1）；
}
.滑块导航.平滑列表.平滑幻灯片.幻灯片照片：之后{
右：50%；
}
.滑块导航.平滑列表.平滑幻灯片.幻灯片照片：之前{
左：50%；
}
.滑块导航.滑动列表.滑动滑轨.滑动滑轨.流动滑轨.滑动照片{
背景色：#C1C1；
背景位置：中心；
身高：100%；
}
.slider nav.slick list.slick-slide.slick-current.幻灯片照片：之前，.slider nav.slick list.slick-slide.slick-current.幻灯片照片：之后{
宽度：50%；
}
/*#sourceMappingURL=style.css.map*/

请使用演示问题的工具更新您的问题，最好是使用堆栈片段（
[]
工具栏按钮；）运行的工具。请提供有关您想要实现的最终结果的更多详细信息。。。你想要一个大的图像在上面，然后在下面滑动？？？这是你想要的吗@HusseinAkar我希望能在不担心图像质量和尺寸的情况下快速进行测试。将此用作来源：200x400是动态的，您可以用任何宽度和高度替换它们。但据我所知，在小屏幕上，并不能看到整个画面。我添加了背景尺寸：封面，但我不工作。你可以在Slick上定义你的响应断点，并进行自己的调整。我想要大尺寸和小尺寸，我可以看到整个图片。你真正要求的是不可能实现的，因为你的活动状态图像更像一个矩形，而你的非活动状态是一个正方形。不能使图像同时适合正方形和矩形。对于非活动状态，您可以尝试
background size:contain
，对于活动状态，您可以尝试
background size:cover
？试试看，让我知道这对你是否有效。