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.
This feature is already supported by a few major browsers including Chrome, Firefox and Opera.
You can use object-fit/object-position like this:
More information can be found here.