Issues with IE stretching featured images in Wordpress theme

I have setup a wordpress theme that uses featured images for header images on pages (I did this to make it easy for clients to modify on their own). Because the header image container needs to be a fixed size (100% width of the page and 300px heigh), I am using the "object-fit:cover" css callout which works perfect. The resulting effect is the image spans the full width of the page, and then is cropped vertically automatically (I did this so client would not need to manually size/crop the images before uploading them).

It works perfect with the exception of IE (of course). I have tried numerous possible workarounds from the "backgroundsize.htc" fix to javascripts, to absolute positioning and using the clip css feature, but it still does not give me the desired effect. IE insists on stretching the image. At this stage I am not sure if this is even doable in IE.

Here is my css for the featured image:

.wp-post-image {
width:100%;
height:300px;
position:relative;
display:block;
top:0px;
object-fit:cover;

}

img.wp-post-image {
max-height:300px;
margin:0 auto;

}

This code works in all browsers except IE, so I am using this code to feed IE overrides for the featured images:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

.wp-post-image {}
img.wp-post-image {}

}

Does anyone have advice for me as to how to force IE to "fill" the featured image container with its respective image and crop it instead of stretching it? Any help is really appreciated...

via Chebli Mohamed