Drupal 7 建站學習手記（四）：如何修改Nivo Slider模塊的寬高

背景

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/，轉載請註明。