Giter VIP home page Giter VIP logo

object-fit-ie's Introduction

object-fit-ie

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.

Demo - Demo Link

This is only built for IE due to no support of object-fit css property.

It support from version 9. Below 9, still in progress.

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 -
<div class='wrapper-name'>
  <img src='' alt=''>
 </div>

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 </body> -
objectFitIE.ieImg('image-wrapper-class-name', 'object-position x', 'object-position y', 'object-fit');
  1. and see it in IE browser.

object-fit-ie's People

Contributors

phe0nix avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.