背景
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-height
和max-height
属性让height
的改变无效:
.block-nivo-slider img {
width: 450px;
max-height: 250px;
min-height: 250px;
}
问题解决!
本文首发http://www.dss886.com/drupal/2014/05/05/03/。转载请注明。