Drupal 7 建站学习手记(四):怎样改动Nivo Slider模块的宽高
背景
Nivo
模块默认大小是用的
Sliderheight:
,
100%, width 100%
但IE7及下面的浏览器是不支持百分比宽高的,
而我的项目目标用户基本都是使用XP系统,项目需求是必须兼容IE7。
因此须要对其CSS改动成绝对像素大小。
问题
改动之后却出现了问题,由于用户上传的图片长宽比是不一样的,
指望用户每次上传的时候先用PS裁剪一下明显不现实,
于是我在CSS里将其拉伸了。这样就不会导致图片仅仅显示一部分。
.block-nivo-slider img {
width: 450px;
height: 250px;
}
可是,Nivo
在每次幻灯片切换前图片都会变成未拉伸的状态。
Slider
幻灯片切换的时候就会感觉图片在“跳动”。
探究
明明已经写死了img
的宽高,为什么切换前会变回来呢?
初步断定是由于Nivo
模块在控制切换的JS里有改变图片的宽高。
Slider
翻了一下Nivo
模块的JS,发现是压缩过的,改起来比較麻烦。
Slider
于是又祭出万能的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/。转载请注明。
Drupal 7 建站学习手记(四):怎样改动Nivo Slider模块的宽高的更多相关文章
- Drupal 7 建站学习手记(五):QuickTabs模块内的元素无法溢出的问题
背景 项目要求站点首页放Views生成的区块,而且要求有很多其它链接. Views生成的区块默认的很多其它链接仅仅能选在列表上方和下方 下图是默认在上方的样式图: 为了美观.我将很多其它链接上移了若干 ...
- 建站随手记:about server stack
建站需要,随手记: Server Stack: ----------- 标准的mezzanine的Stack设置 前端:Nginx wsgi:gunicorn cms tool: mezzanine ...
- OpenGL ES学习笔记(二)——平滑着色、自适应宽高及三维图像生成
首先申明下,本文为笔者学习<OpenGL ES应用开发实践指南(Android卷)>的笔记,涉及的代码均出自原书,如有需要,请到原书指定源码地址下载. <Android学习笔记--O ...
- 建站随手记:installation python virtualenv mezzanine -1
aliyun的网络访问有时会有问题,pip有问题的时候使用豆瓣源 pip install $apptoinstall$ -i http://pypi.douban.com/simple ------- ...
- 黄聪:WordPress 多站点建站教程(四):获取子站点相关信息(站点的注册时间,修改时间,总文章数,URL等)
1.获取子站点blogs表里面的内容信息 $blog_details = get_blog_details(1); echo 'Blog '.$blog_details->blog_id.' i ...
- Githun&HEXO建站小记
title: 建站小记 date: 2018-03-04 11:10:54 updated: 2018-03-06 12:00:00 tags: [hexo,next,建站,学习,前端技术,折腾,博客 ...
- 我的四年建站故事(X)
今天版主们有在群里聊建站的事情了,似乎他们每个人都很热衷于搭建一个自己的网站或者博客,我突然之间觉得非常有必要做一些经验的分享. 首先我想先介绍一下CMS( 网站内容管理系统, 即 Co ...
- Nodejs学习笔记(三)——一张图看懂Nodejs建站
前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试 ...
- WordPress 3.8 中文正式版下载 - 建站与学习首选!全球最流行的开源PHP博客网站程序
转载自:http://www.iplaysoft.com/wordpress.html 话说虽然我一直都在网站底部写着本站基于 WordPress 构建,但时常还是有人问我网站是用什么程序建的,还真有 ...
随机推荐
- 《Android底层接口与驱动开发技术详解》digest
第一章:IDE:Eclipse ADT for java developer其它: Apache Ant Java SE Development Kit5或6 Linux和Mac上使用Apache A ...
- 1.2 linear SVM 推导
1.将公式中的distance具体化 将$w_0$单独抽出作为$b$,$w=(w_1,...,w_n),x=(x_1,...,x_n)$ 则分割平面为:$w^Tx+b=0$ A.证明w为法向量 ...
- [11-3] Gradient Boosting regression
main idea:用adaboost类似的方法,选出g,然后选出步长 Gredient Boosting for regression: h控制方向,eta控制步长,需要对h的大小进行限制 对(x, ...
- 杭电oj1062 Text Reverse
Tips:使用一个临时数组c[1000] ,将输入的数据一边复制一边处理,碰到空格时就将前面的字符反向输出即可 #include<stdio.h> #include<string.h ...
- iOS图片模糊效果
增加 CoreImage.framework CoreGraphic.framework 等库 在使用时引入:#import <Accelerate/Accelerate.h> ,支持 ...
- MPAndroidChart绘制图形表
最近一个项目需要用到表格进行统计显示,本来用的是的achartengine,后来发现一个更加强大的开源框架MPAndroidChart. 下面简单介绍下MPAndroidChart,MPAndroid ...
- windows通过cmd重新启动网卡
ipconfig/release ipconfig/renew
- JSON数据格式介绍
JSON定义 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于阅读和编写,同一时候也易于机器解析和生成.它基于ECMA262语言规范(1999 ...
- poj 1064 Cable master ,二分 精度!!!
给出n根绳子,求把它们分割成K条等长的绳子的最大长度是多少? 二分 用 for(int i=0; i<100; ++i) 取代 while(r-l>eps) 循环100次精度能达到1e ...
- 初识Devexpress ChartControl 之 动态添加stepline及TextAnnotation
最近在用devexpress 第三方软件做项目. devexpress 的控件使用简单.功能强大.类型丰富.界面优美.扩展性强.今天主要是动态生成了一条StepLine.生成后的效果(能力不强,所以做 ...