CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Object Fit

The object-fit property specifies how the contents of an <img> or <video>, should be resized to fit its container.

Look at the following image below, which is 400x250 pixels:

If we style the image above to be 200x350 pixels, it will look like this:

The image is squeezed to fit the container of 200x350 pixels, and its original aspect ratio is destroyed.

If we use object-fit:cover; it will cut off the sides of the image, preserving the aspect ratio, and also filling in the space:

Run code

The following example demonstrates all the possible values of the object-fit property:

Run code

Property Values

The object-fit property can have following values:

Value Description
fill The replaced content is sized to fill the element’s content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit (This is default)
none The replaced content is not resized
cover The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit
contain The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. The entire object is made to fill the box
scale-down The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size