Lynxsia IT Solution

CSS Object Fit

The CSS object-fit property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

Object Fit Values

contain: The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.

cover: The replaced content is sized to maintain its aspect ratio while filling the element's entire content box.

fill: The replaced content is sized to fill the element's content box. The entire object will completely fill the box.

none: The replaced content is not resized.

scale-down: The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.

Global values: inherit, initial, revert, revert-layer, unset.

					 
        
          /* Keyword values */
          object-fit: contain;
          object-fit: cover;
          object-fit: fill;
          object-fit: none;
          object-fit: scale-down;

          /* Global values */
          object-fit: inherit;
          object-fit: initial;
          object-fit: revert;
          object-fit: revert-layer;
          object-fit: unset;

Test Code Online

Object Position

The CSS object-position property specifies the alignment of the selected replaced element's contents within the element's box.

					 
        
          /* Keyword values */
          object-position: top;
          object-position: bottom;
          object-position: left;
          object-position: right;
          object-position: center;

          /* percentage values */
          object-position: 25% 75%;

          /* length values */
          object-position: 0 0;
          object-position: 1cm 2cm;
          object-position: 10ch 8em;

          /* Edge offsets values */
          object-position: bottom 10px right 20px;
          object-position: right 3em bottom 10px;
          object-position: top 0 right 10px;

          /* Global values */
          object-position: inherit;
          object-position: initial;
          object-position: revert;
          object-position: revert-layer;
          object-position: unset;

Test Code Online

View CSS PDF Ebooks

Previous Next

How you feel about this blog:

Share this blog on: