如何在Nivo滑块的“淡入淡出”过渡期间解决高度调整问题？

Question

我在www.ecrc.pl上使用了Nivo图片滑块，看起来它会在'淡出'期间以错误的方式调整图像大小。过渡。这与我在网络上发现的问题完全不同。

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

也许有人可以告诉我，因为我感到困惑。我要感谢任何帮助，提前谢谢。

修改

上面给出的网站地址下没有安装Nivo滑块，抱歉。

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

}