George Panayi George Panayi - 6 months ago 276
HTML Question

Alternative option of object-fit:cover for internet explorer

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

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%;