CSS转换图像不起作用

Question

在我的网站顶部，我有一个图库，当您向下滚动页面时，我希望图库以较小的版本显示。

大版本：

小版本：

我用jQuery制作了这个，当你滚动300px（画廊初始高度）时，你会得到一个大约100px高的小像。

我已经设置了一些过渡：

初始：

#gallery {
  overflow: hidden;
  width: 100%;
  height: 305px;
  white-space: nowrap;
  vertical-align: middle;
  display: inline-block;
  background-color:white;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
#gallery img {
  height: 300px;
  width: auto;
  padding: 2px;
  vertical-align: middle;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

滚动：

#fixed_gallery {
  overflow: hidden !important;
  width: 100% !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  display: inline-block !important;
  position: fixed !important;
  z-index: 53 !important;
  height: 100px !important;
  background-color:white;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

#fixed_gallery img {
  height: 95px !important;
  width: auto !important;
  padding: 2px !important;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

我有相同的导航箭头代码，它们可以通过转换进行缩放..我有点失意：\！

如何让这种转变发挥作用？因此，当图库转到小版本时，我希望图像变小，转换效果很好。

参考网址：http://ehad.mediaheads.nl/blog/＆amp; http://jsfiddle.net/fzjqyhcw/

Answer 1

图片上的css转换无效，因为您实际上并未实际调整图片大小。

尝试添加一个类（而不是切换父级的id），以便您可以执行以下操作：

#gallery {
   ...
   position: relative;
}

#gallery img {
   ...
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

#gallery.fixed-gallery {
   ....
   position: fixed;
}

#gallery.fixed-gallery img {
   ....
   height: 95px;
}