Object-fit: cover lightbox gallery fix in IE?

Question

I am using a flexbox gallery with a lightbox that unfortunately uses object-fit: cover, which does not work in Internet Explorer. I have attempted several fixes, but any script with uses these images as a background image prevents the lightbox function from working. Anything else just breaks the lightbox.

Here is the HTML:

<div id="container" class="container">
        <figure>
          <img src="https://4.bp.blogspot.com/-ZfZfCzTEUD8/W_or2JcZttI/AAAAAAAABmY/fGcfprjhrFQxKqB839BxyaAMbH2G-IqEQCLcBGAs/s1600/echelon-airways-logo.jpg">
       </figure>
        <figure>
          <img src="https://3.bp.blogspot.com/-fjDfU6XgmKU/W_oPkL4NjwI/AAAAAAAABjc/EQRV8u8VS3k1pHlSRDiarQyazViKhQ37ACLcBGAs/s1600/Plane.jpg">
        </figure>
        <figure>
          <img src="https://3.bp.blogspot.com/-G-B67WiRq2I/W_oP7AwRuKI/AAAAAAAABj4/hIMHAElHsrYMIYN4b91pkJjYjAlm7hj7ACLcBGAs/s1600/echelon-airways-font.jpg">
        </figure>
        <figure>
          <img src="https://1.bp.blogspot.com/-3DLPWVTq4kc/W_ofx4hCcyI/AAAAAAAABkc/_-JymxNKaHshJucgVMYPsvLZNyKkf3p5QCLcBGAs/s1600/echelon-book-1.jpg">
        </figure>
        <figure>
          <img src="https://4.bp.blogspot.com/-3yS1d6DGN2o/W_ofxy8IS-I/AAAAAAAABkg/CHq82FGEiVYglcvYcOaker9cUlhqrFA_QCLcBGAs/s1600/echelon-book-2.jpg">
        </figure>
        <figure>
          <img src="https://4.bp.blogspot.com/-ZUdiGM8QpGQ/W_okanO7SNI/AAAAAAAABlk/IiKnQV3EuSwNelF-zusQaqkfX9TvIwjjQCLcBGAs/s1600/echelon-book-3.jpg">
        </figure><figure>
          <img src="https://2.bp.blogspot.com/-xC1h_we5k6U/W_oPkX2o1UI/AAAAAAAABjg/Im9d0gmJgDcVf2aLAVmagQ62CQUKzqgLQCLcBGAs/s1600/echelon-airways-website.jpg">
        </figure>
        <figure>
          <img src="https://4.bp.blogspot.com/-47xZ9mvq5j0/W_ooJC3-CZI/AAAAAAAABmI/X9Ws38hn8d0Jvg_UNJVTXZ2hgf7nT_gGACLcBGAs/s1600/echelon-boarding-pass-front.jpg">
        </figure><figure>
          <img src="https://3.bp.blogspot.com/-R6Ae3B20pFY/W_ooJF5o3ZI/AAAAAAAABmE/GwW86TkOHUw4yJ5rOKO98A7LoRtmZjuEwCLcBGAs/s1600/echelon-boarding-pass-back.jpg">
        </figure>
        <figure>
          <img src="https://3.bp.blogspot.com/-MZ-J_ZkZ4ac/W_pRT51eUZI/AAAAAAAABnA/D_O3lWeDhNI-Uu7BcE-wuxIH0MITnlvaQCLcBGAs/s1600/echelon-airways-magazine-3-b.png">
        </figure>
        <figure>
          <img src="https://2.bp.blogspot.com/-oIj8sZMyja4/W_pOuEsXVMI/AAAAAAAABmo/wEDfRCDK_c4GV1qHo3CYIjZBXz37zVT6QCLcBGAs/s1600/echelon-airways-magazine-2.jpg">
        </figure>
        <figure>
          <img src="https://1.bp.blogspot.com/-3wh16D8yRt0/W_pQicl06TI/AAAAAAAABm4/73GQHrmiPuktsO_h6bSdzYLSDOK80RlQACLcBGAs/s1600/echelon-airways-magazine-3.jpg">
        </figure>
      </div>

And the javascript:

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script>
(function($) {
  $.fn.flexgal = function(){
    $('body').prepend('<div id="fullimage" style="display: none"></div>')
    $(this).addClass('flex-gallery');
    $('img', this).parent().addClass('image-rate');

   $('.image-rate').click(function() {
     $('img', this).clone().prependTo('#fullimage');
     $( "#fullimage" ).fadeIn("slow");
   });

   $('#fullimage').click(function() {
     $(this).fadeOut( "slow", function() {
       $('img',this).remove();
     });
   });
 }
}(jQuery));

</script>
<script>
$('#container').flexgal();
</script>

</div>

Is there a way to make the images remain proportional in Internet Explorer? Here's an example of the page: http://jh-portfolio-test-2.blogspot.com/2018/11/project-test.html