How to add object-fit:cover style to IE browser?

user_10127586 0
Viewed 5468

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;     
}
css html javascript
1 Answers

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

user_23763170
Related