Почему Countper.js '.cropper-Container увеличивается в высоте, когда я пробираюсь через несколько изображений? [закрыто] ⇐ Jquery

[Anonymous]

Мой проект использует:
jQuery v3.6.4, Bootstrap v4.0.0 , & cropper.js v1.5.12 .
in cropper.js v1.5.12, в самых популярных родительских дивизациях коробки классов Cropper-Container Cropper-bg . Высота каждого из этих div увеличивается по мере того, как я пробегаю через несколько изображений, чтобы создать экземпляр коробки обрезки для каждого изображения. Например, 4 изображения, каждое из которых имела ширину 679px и высоту 960px. Когда я прошел через изображения, у первого .cropper-container высота 2849px; 2 -й имел высоту 4991PX; 3 -й имел высоту 9275px; и у 4 -го была высота 17843px. Однако, если я не пробегаю через несколько изображений и что изображение только одно, высота .cropper-container составляет 728px для изображения, имеющего ширину 679px и высоту 960px. Это идеально подходило для изображения (не слишком длинного или короткого для изображения), так как визуализованная ширина изображения составила 500px. В чем может быть проблема и что может быть исправлением?$('#image-upload').change(function(event){
const files = this.files;

if (!files.length) return;

$('#modal-outermost').modal({
backdrop: 'static',
keyboard: false
});

let imageClass = 'images';

let retrievedImageSrc = '';

$.each(files, function (index, file){
const reader = new FileReader();

reader.onload = function (e) {
let imgSrc = e.target.result;

$('.images').each(function(){
retrievedImageSrc = $(this).attr('src');

if(!retrievedImageSrc.length){

$(this).attr('src', imgSrc);

return false;
}
});
};

reader.readAsDataURL(file);
});
});

js для добавления экземпляра Cropper в каждое изображение в модале начальной загрузки
$modal.on('shown.bs.modal', function(){

const images = document.querySelectorAll('.images');

let numImages = images.length;

const croppers = [];
let i;

for (i = 0; i < numImages; i++) {
croppers.push(new Cropper(images, {
aspectRatio: NaN,
viewMode: 2,
preview:'.preview',
dragMode: 'move',
cropBoxResizable: true,

minCropBoxWidth: 320,
minCropBoxHeight: 240,

data:{
width: 640,
height: 480
}
}));
}
});

Модал Booststrap находится в структуре HTML, как SO:








Crop



Cancel
















Crop



Cancel








Единственное пользовательское CSS, которое может повлиять на Cropper.js, - это:
img{
display: block;
max-width: 100%;
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... -through-m