Drupal 7 建站学习手记(四):如何修改Nivo Slider模块的宽高
来源:互联网 发布:打简谱的软件 编辑:程序博客网 时间:2024/05/21 18:43
背景
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/,转载请注明。
0 0
- Drupal 7 建站学习手记(四):如何修改Nivo Slider模块的宽高
- Drupal 7 建站学习手记(三):Nivo Slider模块报错的问题
- Drupal 7 建站学习手记(二):如何将Custom Search模块水平摆放
- Drupal 7 建站学习手记(五):QuickTabs模块内的元素无法溢出的问题
- JQuery插件之(四)--轮播图nivo-slider使用教程
- Drupal 7 建站学习手记(一):PHP输出的页面多出空行的问题
- 号称最好的JQUERY幻灯片-NIVO SLIDER
- 号称最好的JQUERY幻灯片-NIVO SLIDER
- 幻灯片插件——Nivo Slider的使用(一)(附示例源代码)
- Drupal7 幻灯片 Nivo Slider
- Nivo Slider Settings
- nivo slider 的常规用法 带缩略图的效果
- 超棒的免费jQuery幻灯插件:Nivo Slider
- 基于JQuery的轮播图插件nivo-slider使用教程
- 基于JQuery的轮播图插件nivo-slider使用教程
- 基于JQuery的轮播图插件nivo-slider使用教程
- 基于JQuery的轮播图插件nivo-slider使用教程
- Nivo Slider 简要使用文档.
- AIDL入门
- poj 1243
- SQL 约束 (Constraints)
- Chimpmunk + js 跑酷
- radiobutton 做导航按钮
- Drupal 7 建站学习手记(四):如何修改Nivo Slider模块的宽高
- 创业点子网站
- Eclipse更改皮肤
- 开源项目--JCIFS
- SQL NOT NULL 约束
- pki复习
- SQL UNIQUE 约束
- 【操作系统】分段管理和分页管理的区别
- Myeclipse中Aptana插件的简单快捷使用