html - Alternative option of object-fit:cover for internet explorer

Question

I'm looking an alternative method of the object-fit:cover for the internet explorer, because is not supporting it. Basically I'm using the object-fit:cover for not stretching images inside a div. I look on internet for some solutions but all that I found was solutions to load the image from css instead from img tag like they way I'm doing it. Does anyone has any alternative method of not stretching images inside a div on internet explorerCan anyone help me?

here is a simple code

HTML

<div class="grid-image"> 
  <img itemprop="image" alt="TEST" src="images/15.jpg">
</div>

CSS

.grid-image {
    width: 100%;
    background-color: grey;
    position: relative;
    overflow: hidden;
    height: 100%;
}

grid-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

Answer 1

Ok I solved it with this

HTML

<div class="grid-image" style="background-image: url(images/15.jpg);"></div>

CSS

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;