Object-fit: cover lightbox gallery fix in IE? - flexbox

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