图片缩放以适合 Bootstrap 网格

Question

我有一个 Bootstrap 网格和里面的图像。我的图片大小不一样，所以我得到了一个难看的网格。我希望所有图像看起来大小相同。我希望它们被缩放并隐藏图像的覆盖部分。

我正在尝试使用此代码，但没有成功：

<div class='col-xs-6 col-sm-6 col-md-3 col-lg-2'>
    <a class="thumbnail fancybox" rel="ligthbox" href="url">
        <img class="img-responsive" style='-ms-object-fit: cover; -moz-object-fit: cover; -o-object-fit: cover; -webkit-object-fit: cover;  object-fit: cover;  overflow: hidden; -ms-transition: 1s all; -moz-transition: 1s all; -o-transition: 1s all; -webkit-transition: 1s all; transition: 1s all;' alt=""  src="url">
    </a>
</div> <!-- col-6 / end -->

我知道把样式放在那里不太干净，只是为了测试。

Answer 1

我想这就是您要找的。

JS:

function squareThumbs() {
  var thumbs = document.getElementsByTagName("img");

  for (i = 0; i < thumbs.length; i++) {
    if (thumbs[i].parentNode.className.indexOf("thumbnail") != -1){
      thumbs[i].style.height = thumbs[i].clientWidth + "px";
      console.log(thumbs[i].clientWidth);
      console.log(thumbs[i].clientHeight);
    }
    console.log(thumbs[i].parentNode.className);
  }
}
squareThumbs();
window.onresize = squareThumbs;

HTML:

<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">
  <a class="thumbnail fancybox" rel="ligthbox" href="#" style="overflow:hidden;">
      <img src="http://placehold.it/100x125" class="img-responsive" style="width:100%;-ms-object-fit: cover; -moz-object-fit: cover; -o-object-fit: cover; -webkit-object-fit: cover;  object-fit: cover;  overflow: hidden; -ms-transition: 1s all; -moz-transition: 1s all; -o-transition: 1s all; -webkit-transition: 1s all; transition: 1s all;" alt="">
    </a>
</div>

现场演示：http://www.bootply.com/bg1A4I9IJ0

图片缩放以适合 Bootstrap 网格

Image zoom to fit Bootstrap Grid

html

css

image

fancybox

twitter-bootstrap