3

I Tried to fit image to a box using 'object-fit:cover' style. It is working properly other browsers. but it is not working properly on IE browser(Internet Explorer page looks different). How can I fix the issue. Below is my code.

<img class="fit-box" src="https://i.pinimg.com/originals/12/64/da/1264da4a3f18207dc22592102abae40d.jpg">

.fit-box{
  width:100%;
  height:229px;
  object-fit:cover;     
}
Hal Abelson
  • 89
  • 1
  • 8
  • Which issue do you want to fix? 1) Internet Explorer doesn't support that property, or 2) Internet Explorer page looks different ... the answer may surprise you ... it's .... Internet Explorer is an old piece of rubbish and if you insist on coding for it, don't use any code (JS, HTML or CSS) that's newer than about 1999 – Jaromanda X Aug 31 '18 at 04:32
  • Possible of duplicate: https://stackoverflow.com/questions/37792720/ie-and-edge-fix-for-object-fit-cover – Evince Development Aug 31 '18 at 04:44

1 Answers1

2

IE doesnt support object-fit, instead u can use background image with background-size:cover

.fit-box {
  width: 100%;
  height: 229px;
  background-size: cover;
  background-repeat:no-reapeat;
  background-position: 50% 50%;
}
<div class="fit-box" style="background-image: url(https://i.pinimg.com/originals/12/64/da/1264da4a3f18207dc22592102abae40d.jpg">
</div>

Here , instead of passing src to image tag, u can pass that same source as inline style background-image url.

This method will work for all browsers.

If u want to use this method only for IE, than you can use Mordernizr to detect supported features. More Info here

Gautam Naik
  • 8,990
  • 3
  • 27
  • 42