Question

我正在使用isotope插件用于流体网格，并希望在悬停时为图像添加一些效果，此时网格有3个不同高度的图像：jsfiddle code。有没有办法让他们保持响应并修复悬停缩放的高度变化？请提出建议，做错了什么？

HTML

<div class="item">
    <a href="https://twitter.com/">
      <img src="http://s9.postimg.org/n0sl7ucqn/image.jpg" alt="">
    </a>
</div>
<div class="item">
    <a href="https://twitter.com/">
      <img src="http://s17.postimg.org/6r28okkq7/image.jpg" alt="">
    </a>
</div>
<div class="item">
    <a href="https://twitter.com/">
      <img src="http://s17.postimg.org/c12m24flb/image.jpg" alt="">
    </a>
</div>

CSS

.item {
  width: 46.1%;
  height: auto;
  margin-right: 4%;
  margin-bottom: 30px;
  float: left;
  overflow: hidden;
}   

#social_indicator {
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  text-align: right;
  margin-top: 0;
  margin-bottom: 0;
}

.item img {
  width: 100%;
  height: 100%;
  -webkit-transition: all 3s ease;
  -moz-transition:    all 3s ease;
  -o-transition:      all 3s ease;
  -ms-transition:     all 3s ease;
  transition:         all 3s ease;
}

.item img:hover {
  width:   105%;
  height:  105%;
  margin-right: 1%;
  margin-bottom: 1%;
}

}

Answer 1

首先，overflow:hidden;应该在div上，而不是图像。

我会用jQuery设置div的高度，以防止它缩放，当图像执行：

$('.item > a > img').each(function(index, value){
    $(value).parent('a').parent('.item').height( $(value).height() );
});

请记住在<head>中添加jQuery-library：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

放大流体网格内的图像

1 个答案: