图像块问题内的图像比例

Question

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

Codepen.io link

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 样式 sheet，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

图像块问题内的图像比例

Image scale within image block issue

html

css

jquery

scale