PhotoSwipe - Aspect Ratio Fix

main.scss

/*
  Add these in the main.scss that ships with PhotoSwipe.
*/

.pswp__item--ratiofix .pswp__img:last-child {
  opacity: 0.001;
  will-change: opacity;
  transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
}

.pswp__img--placeholder {
  opacity: 1 !important;
  object-fit: contain;
}

photoswipe-init.js

/*
  Use listeners to enhance the "pure Vanilla JS implementation with IE8 support" example script 
  from the PhotoSwipe documentation found here http://photoswipe.com/documentation/getting-started.html
*/

// ...
// gallery.init();

var ratioFix;
gallery.listen('initialZoomIn', function() {
  var el = document.querySelectorAll('.pswp__item')[1];
  el.className += (el.className ? ' ' : '') + 'pswp__item--ratiofix';
  ratioFix = true;
});

gallery.listen('initialZoomInEnd', function() {
  var ratiofixTimer = window.setInterval(function(){
    var el = document.querySelectorAll('.pswp__item--ratiofix .pswp__img')[1];
    if ( typeof(el) != 'undefined' && el != null ){
      window.clearInterval(ratiofixTimer);
      el.style.opacity = 1;
  	}
  }, 10);
});

gallery.listen('afterChange', function(){
  if( ratioFix == true ){
    var el = document.querySelectorAll('.pswp__item--ratiofix')[0];
    var reg = new RegExp('(\\s|^)' + 'pswp__item--ratiofix' + '(\\s|$)');
    el.className = el.className.replace(reg, ' ').replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    ratioFix = false;
  }
});

// ...