0

Right now i have an image within a div like so : 

<section class="col-md-12">

    <img src="imagepath/image.jpg"/>

</div>

I can use object-fit:cover; for firefox , chrome and the other usefull browsers but this won't work for IE. is there a workaround to make the images look the same as they would look with object-fit:cover;?

ps. i am unable to make the image the background of the parent.

Niels Peeren
  • 315
  • 1
  • 13
  • Tried Googling it? Found this article which contains an answer using a few lines of CSS and JS: https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3#.7mk1npsxu – Martin Aug 28 '16 at 14:05
  • Possible duplicate of [Alternative option of object-fit:cover for internet explorer](http://stackoverflow.com/questions/33473978/alternative-option-of-object-fitcover-for-internet-explorer) – Martin Aug 28 '16 at 14:06
  • Use that image as a background image of your section. And apply background-size:cover – Arpit Svt Aug 28 '16 at 14:06
  • I did google it and the solution on the link you placed does not seem to work for me. also @ArpitSvt my last line sayd that i am unable to make it the background. Martin Parkin the other post gives a solution if you CAN make it a backgorund image. – Niels Peeren Aug 28 '16 at 14:09
  • ops sorry i didnt read that – Arpit Svt Aug 28 '16 at 14:10
  • Here's some IE guidance for `object-fit`: http://stackoverflow.com/a/37127590/3597276 – Michael Benjamin Aug 28 '16 at 14:25

1 Answers1

0

Use it to html

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

use it to css

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
Billal hossain
  • 1
  • 2