0

Is any way to add object-fit property that works for internet explorer as object fit is not introduced by ie. So what should I can do for this problem? any possible solution?

Muhammad Rizwan
  • 171
  • 1
  • 2
  • 12
  • Does this answer your question? [Alternative option of object-fit:contain for IE](https://stackoverflow.com/questions/41226895/alternative-option-of-object-fitcontain-for-ie) – demkovych Jan 27 '20 at 09:53
  • Use a [modernizr](https://modernizr.com/) to check if your browser supports it and if it doesn't use a [polyfill](https://www.google.com/search?q=object+fit+polyfill+ie11) (it will usually change the image into a background image using background-cover) – Pete Jan 27 '20 at 09:55
  • Hi Pete can you please guide me how i can use polyfill for this purpose – Muhammad Rizwan Jan 27 '20 at 10:01
  • You can check this solution https://stackoverflow.com/questions/37792720/ie-and-edge-fix-for-object-fit-cover – Ahmed A. Mahmoud Jan 27 '20 at 10:02
  • https://stackoverflow.com/questions/14506282/modernizr-correct-way-of-loading-polyfills-using-custom-detects – Pete Jan 27 '20 at 10:11

1 Answers1

0

object-fit property is not supported by the Internet Explorer browser. I suggest you refer the Phe0nix/object-fit-ie polyfill.

object-fit polyfill only for images in IE. Every other browsers (Chrome, Safari, Firefox, Opera, Edge) supported 'object-fit' property. It help to fit the image into the containers.

Syntax:

objectFitIE.ieImg('image-wrapper-class-name', 'object-position x', 'object-position y', 'object-fit');
  1. image-wrapper-class-name - place your wrapper class name here. see the example below -

enter image description here

It will target the class wrapper-name. Make sure, within the wrapper only one image will be there.

  1. object-position x and object-position y - place the values for x and y axis. just like the object-position in css.

  2. object-fit - place the object-fit value just like you put it in css.

Usage:

  1. create the wrapper of the image where you want to apply object-fit property.

  2. include the object-fit-ie.js file in your codebase.

  3. call this before end of body

objectFitIE.ieImg('image-wrapper-class-name', 'object-position x', 'object-position y', 'object-fit');

  1. see it in IE browser.

Demo link

Reference:

object-fit-ie

Deepak-MSFT
  • 10,379
  • 1
  • 12
  • 19