jquery - 如何解决 Nivo Slider 中“淡化”过渡期间的高度调整问题？

Question

我正在使用 Nivo 图像滑块，它似乎在“淡入淡出”过渡期间以错误的方式调整图像大小。这与我在网上找到的问题非常不同。

所有图像均为 900 x 300 像素，滑块为 1000 x 333 像素。第一张图像被正确拉伸，但是当涉及到变化时，在过渡过程中，淡入图像被剪切到 1000 x 300 像素。更改后变为滑块大小。我真的不知道是什么问题，是我的 css（我尝试了一切，甚至安装了新的滑块安装），还是滑块本身？

也许有人可以告诉我，因为我感到困惑。我会很感激任何帮助，在此先感谢。

编辑：

作为示例给出的站点地址不再安装 Nivo 滑块，所以我删除了 url，抱歉。

Answer 1

我找到了一个解决方案，它似乎没问题。唯一要添加并保持响应的代码是：

.nivoSlider img{height:100% !important;} 
.nivo-main-image{height:100% !important;}

这样做后，您会收到漂亮且响应迅速的滑块，它可以与以 % 为单位的布局一起使用。

Answer 2

 .nivoSlider {     height: 300px;    }

如果您是响应式地执行此操作，则需要根据所使用的媒体查询找出正确的宽度和高度尺寸。下面只是随机数，所以你可以明白我的意思：

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {

.nivoSlider     {     height: 300px;    }
.nivoSlider img {     height: 300px;    } 

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

.nivoSlider     {     width:300px; height: 200px;    }
.nivoSlider img {     width:300px; height: 200px;    }

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

.nivoSlider     {     width:200px; height: 100px;    }
.nivoSlider img {     width:200px; height: 100px;    }

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

and more here

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

and more here

}