Javascript Shuffle.js-应用过滤器时调整图像大小

我想在应用过滤器时调整图像大小。 目前我有以下几点：

Demo.prototype.addShuffleEventListeners = function () {
    this.shuffle.on(Shuffle.EventType.LAYOUT, function (data) {
        console.log('layout. data:', data);
        var count = document.getElementsByClassName("shuffle-item--hidden").length;
        console.log(count);
        if (count > 150) {
            $(".img-fluid").addClass("img-big");
        } else {
            $(".img-fluid").removeClass("img-big");
        }
    });

    this.shuffle.on(Shuffle.EventType.REMOVED, function (data) {
        console.log('removed. data:', data);
        var count = document.getElementsByClassName("shuffle-item--hidden").length;
        console.log(count);
        if (count > 150) {
            $(".img-fluid").addClass("img-big");
        } else {
            $(".img-fluid").removeClass("img-big");
        }
    });
};

.img-fluid {
    width: 50px;
    height: 50px;
}

.img-big {
    width: 80px;
    height: 80px;
}

我的CSS文件包含以下内容：

Demo.prototype.addShuffleEventListeners = function () {
    this.shuffle.on(Shuffle.EventType.LAYOUT, function (data) {
        console.log('layout. data:', data);
        var count = document.getElementsByClassName("shuffle-item--hidden").length;
        console.log(count);
        if (count > 150) {
            $(".img-fluid").addClass("img-big");
        } else {
            $(".img-fluid").removeClass("img-big");
        }
    });

    this.shuffle.on(Shuffle.EventType.REMOVED, function (data) {
        console.log('removed. data:', data);
        var count = document.getElementsByClassName("shuffle-item--hidden").length;
        console.log(count);
        if (count > 150) {
            $(".img-fluid").addClass("img-big");
        } else {
            $(".img-fluid").removeClass("img-big");
        }
    });
};

.img-fluid {
    width: 50px;
    height: 50px;
}

.img-big {
    width: 80px;
    height: 80px;
}

出现的问题是，当计数大于150时，图片本身正在调整大小，但它们正在被裁剪。 结果如下：

你能给我指一下这里的正确方向吗

img元素显示如下：

 <figure class="picture-item" data-groups='["it"]'>
   <img src="images/georgi-naydenov.jpg" class="img-fluid" data-toggle="popover" alt="...">
   <div class="picture-item__details">
     <figcaption class="picture-item__title">Georgi Naydenov</figcaption>
   </div>
  </figure>

格奥尔基·内德诺夫

---

我只是摆弄了一下HTML，因为我不想显示整个javascript文件-

请添加您的HTML代码。“您能在这里给我指一下正确的方向吗？”-为什么是的，当然：//如果您不告诉我们这些图像实际包含在什么样的HTML结构中，不可能知道为什么会发生这种情况，抱歉，伙计们，刚刚编辑了评论-我留下了HTML的一部分，修改了整个HTML请添加你的HTML代码。“你能在这里给我指一下正确的方向吗？”-为什么是的，当然：//如果您不告诉我们这些图像实际包含的HTML结构以及应用的格式，就无法解释为什么会发生这种情况。抱歉，伙计们，刚刚编辑了评论-我留下了一部分HTML并处理了整个HTML