Question

问候，使用同位素插件我已经为页面创建了流体响应网格，并希望为其大小的图像添加一些缩放效果。问题是，在2列媒体查询中，高度和宽度增长，而3列只增加高度，你能否建议可以添加到代码中以阻止它在大小上增长，并且有点像缩放效果。< / p>

HTML

<div id="wrapper">

    <div id="page-content-wrapper">
        <div class="container-fluid"> 

                <div class="grid">

                  <div class="item">
                    <a href="https://twitter.com/">
                      <img src="img/7.jpg" alt="">
                      <p id="social_indicator">Facebook, 1 day ago</p>


                </div><!-- Grid --> 
        </div> <!-- Container fluid -->
    </div>  <!-- /#page-content-wrapper -->

</div>   <!-- /#wrapper -->

CSS

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

.item img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

}

P.S：我在codepen中加载了css样式表，here is the link。

Answer 1

添加一些javascript，以便在图片加载后锁定图片的宽度和高度。

$(function(){
  $('.item-inner').each(function(){
    var img = $(this).find('img');
    $(this).css({height:img.height(), width:img.width()});
  })
})

隐藏.items上的溢出

.item-inner {
  overflow:hidden;
}

塑造你的标记，以便.items有一个内包装来包含图像。

现在你的图像会在.item中缩放，但.item不会增长。

http://codepen.io/anon/pen/dYvpwd

图像块问题中的图像比例

1 个答案: