The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
Syntax
The object-fit property is specified as a single keyword chosen from the list of values below.
Values
fill(Initial value) - The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.contain- The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.cover- The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.none- The replaced content is not resized to fit inside the element’s content box: the object’s concrete object size is determined using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.scale-down- The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.
Codepen Example
Many other images work fine.
In other browsers everything also…
