Как добавить / уменьшить изображение с различными размерами и получить «хороший» результат?

Question

Я пытаюсь добавить / убрать изображения для галереи.

Мой неправильный результат таков: https://www.3dexhibit.art/gallery.php?guid=a128d

Я использую jquery:

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

Как правильно показывать слайды (используя исчезать / исчезать) изображения разных размеров?

Спасибо

Answer 1

Отметьте этот Codepen Слайд-шоу

$("#slideshow > div:gt(0)").hide();
var index =0;
    setInterval(function(){
        var ss = $("#slideshow > div"),
            first,second,len = ss.length;
        first = ss.get(index);
        index++;
        if(index >= len) {index = 0;} // jump back to first
        second = ss.get(index);

        $(first).fadeOut(300,function(){
            $(second).fadeIn(300);
        });         
    },3000);

Answer 2

Создать контейнер с x шириной и y высотой. Установите одинаковую ширину и высоту с max-width и max-height для изображений и, возможно, object-fit: cover или object-fit: contain (в зависимости от того, что вам нравится) на изображениях.