Question

应用滤镜后，我想调整图像尺寸。目前，我有以下内容：

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");
        }
    });
};

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

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

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

发生的问题是，当计数> 150时，图片本身会被调整大小，但被裁剪了。结果如下： https://i.imgur.com/VEAhmLD.gif

您能在这里指出正确的方向吗？

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>

由于我不想显示整个javascript文件-https://jsfiddle.net/4kdfngrw/

Shuffle.js-在应用滤镜时调整图像大小

0 个答案: