The Most Secure Cross Browser Testing Platform since 2012

Blog

Cross Browser object-fit/object-position

shutterstock_234378844
BLOG / Web Development

Cross Browser object-fit/object-position

Object-fit/object-position is the method of specifying how an object (image or video) should fit inside its box. Object-fit options include “contain” (fit according to aspect ratio), “fill” (stretches object to fill) and “cover” (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.

Browser Support

This feature is already supported by a few major browsers including Chrome, Firefox and Opera.

Code Example

You can use object-fit/object-position like this:

object-fit: cover;

More Information

More information can be found here.