Drupal 7:如何修改Nivo Slider模块的宽高

阅读时间 约 1 分钟

Nivo Slider模块默认大小是用的height: 100%, width 100%

但IE7及以下的浏览器是不支持百分比宽高的,

而我的项目目标用户基本都是使用XP系统,项目需求是必须兼容IE7。

因此需要对其CSS修改成绝对像素大小。

问题

修改之后却出现了问题,因为用户上传的图片长宽比是不一样的,

指望用户每次上传的时候先用PS裁剪一下明显不现实,

于是我在CSS里将其拉伸了,这样就不会导致图片只显示一部分。

.block-nivo-slider img {
  width: 450px;
  height: 250px;
}

但是Nivo Slider在每次幻灯片切换前图片都会变成未拉伸的状态。

幻灯片切换的时候就会感觉图片在“跳动”。

探究

明明已经写死了img的宽高,为什么切换前会变回来呢?

初步断定是因为Nivo Slider模块在控制切换的JS里有改变图片的宽高。

翻了一下Nivo Slider模块的JS,发现是压缩过的,改起来比较麻烦。

于是又祭出万能的CSS大法了!- -!

解决

仔细分析后,发现JS是在改变img元素的height属性

我们可以用min-heightmax-height属性让height的改变无效:

.block-nivo-slider img {
  width: 450px;
  max-height: 250px;
  min-height: 250px;
}

问题解决!

「喜欢这篇文章?」

打赏

扫描下面的二维码向我付款

鼓励我写出更好的文章

微信支付 微信支付二维码
微信支付 支付宝二维码