# Object Fit Utilities for controlling how replaced content (like images) is fitted and positioned inside its container. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-object-fit--introduction ## Variants documented in Storybook - ObjectFit: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-object-fit--objectfit - ObjectPosition: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-object-fit--objectposition ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Object Fit. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html

Utilities

Object Fit & Position Utilities

A complete reference of all object-fit and object-position utility classes.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Object Fit

Format: ux4g-object-{fit/position}

Cover ux4g-of-cover

Contain ux4g-of-contain

Fill ux4g-of-fill

None ux4g-of-none

Scale Down ux4g-of-scale-down

Object Position

Format: ux4g-object-{fit/position}

Ux4g Op ux4g-op

Center ux4g-op-center

Top ux4g-op-top

Bottom ux4g-op-bottom

Left ux4g-op-left

Right ux4g-op-right

Top Left ux4g-op-top-left

Top Right ux4g-op-top-right

Bottom Left ux4g-op-bottom-left

Bottom Right ux4g-op-bottom-right

Responsive Object Fit

Format: ux4g-object-{fit/position}

Sm Of Cover ux4g-sm-of-cover

Sm Of Contain ux4g-sm-of-contain

Sm Of Fill ux4g-sm-of-fill

Sm Of None ux4g-sm-of-none

Sm Of Scale Down ux4g-sm-of-scale-down

Md Of Cover ux4g-md-of-cover

Md Of Contain ux4g-md-of-contain

Md Of Fill ux4g-md-of-fill

Md Of None ux4g-md-of-none

Md Of Scale Down ux4g-md-of-scale-down

Lg Of Cover ux4g-lg-of-cover

Lg Of Contain ux4g-lg-of-contain

Lg Of Fill ux4g-lg-of-fill

Lg Of None ux4g-lg-of-none

Lg Of Scale Down ux4g-lg-of-scale-down

Xl Of Cover ux4g-xl-of-cover

Xl Of Contain ux4g-xl-of-contain

Xl Of Fill ux4g-xl-of-fill

Xl Of None ux4g-xl-of-none

Xl Of Scale Down ux4g-xl-of-scale-down

2xl Of Cover ux4g-2xl-of-cover

2xl Of Contain ux4g-2xl-of-contain

2xl Of Fill ux4g-2xl-of-fill

2xl Of None ux4g-2xl-of-none

2xl Of Scale Down ux4g-2xl-of-scale-down

``` React: ```jsx import React from 'react'; const ObjectFitExample1Demo = () => ( <>

Utilities

Object Fit & Position Utilities

A complete reference of all object-fit and object-position utility classes.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

{/* Object Fit */}

Object Fit

Format: ux4g-object-{fit/position}

Cover ux4g-of-cover

Contain ux4g-of-contain

Fill ux4g-of-fill

None ux4g-of-none

Scale Down ux4g-of-scale-down

{/* Object Position */}

Object Position

Format: ux4g-object-{fit/position}

Ux4g Op ux4g-op

Center ux4g-op-center

Top ux4g-op-top

Bottom ux4g-op-bottom

Left ux4g-op-left

Right ux4g-op-right

Top Left ux4g-op-top-left

Top Right ux4g-op-top-right

Bottom Left ux4g-op-bottom-left

Bottom Right ux4g-op-bottom-right

{/* Responsive Object Fit */}

Responsive Object Fit

Format: ux4g-object-{fit/position}

Sm Of Cover ux4g-sm-of-cover

Sm Of Contain ux4g-sm-of-contain

Sm Of Fill ux4g-sm-of-fill

Sm Of None ux4g-sm-of-none

Sm Of Scale Down ux4g-sm-of-scale-down

Md Of Cover ux4g-md-of-cover

Md Of Contain ux4g-md-of-contain

Md Of Fill ux4g-md-of-fill

Md Of None ux4g-md-of-none

Md Of Scale Down ux4g-md-of-scale-down

Lg Of Cover ux4g-lg-of-cover

Lg Of Contain ux4g-lg-of-contain

Lg Of Fill ux4g-lg-of-fill

Lg Of None ux4g-lg-of-none

Lg Of Scale Down ux4g-lg-of-scale-down

Xl Of Cover ux4g-xl-of-cover

Xl Of Contain ux4g-xl-of-contain

Xl Of Fill ux4g-xl-of-fill

Xl Of None ux4g-xl-of-none

Xl Of Scale Down ux4g-xl-of-scale-down

2xl Of Cover ux4g-2xl-of-cover

2xl Of Contain ux4g-2xl-of-contain

2xl Of Fill ux4g-2xl-of-fill

2xl Of None ux4g-2xl-of-none

2xl Of Scale Down ux4g-2xl-of-scale-down

); export default ObjectFitExample1Demo; ``` Angular: ```html

Utilities

Object Fit & Position Utilities

A complete reference of all object-fit and object-position utility classes.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Object Fit

Format: ux4g-object-{fit/position}

Cover ux4g-of-cover

Contain ux4g-of-contain

Fill ux4g-of-fill

None ux4g-of-none

Scale Down ux4g-of-scale-down

Object Position

Format: ux4g-object-{fit/position}

Ux4g Op ux4g-op

Center ux4g-op-center

Top ux4g-op-top

Bottom ux4g-op-bottom

Left ux4g-op-left

Right ux4g-op-right

Top Left ux4g-op-top-left

Top Right ux4g-op-top-right

Bottom Left ux4g-op-bottom-left

Bottom Right ux4g-op-bottom-right

Responsive Object Fit

Format: ux4g-object-{fit/position}

Sm Of Cover ux4g-sm-of-cover

Sm Of Contain ux4g-sm-of-contain

Sm Of Fill ux4g-sm-of-fill

Sm Of None ux4g-sm-of-none

Sm Of Scale Down ux4g-sm-of-scale-down

Md Of Cover ux4g-md-of-cover

Md Of Contain ux4g-md-of-contain

Md Of Fill ux4g-md-of-fill

Md Of None ux4g-md-of-none

Md Of Scale Down ux4g-md-of-scale-down

Lg Of Cover ux4g-lg-of-cover

Lg Of Contain ux4g-lg-of-contain

Lg Of Fill ux4g-lg-of-fill

Lg Of None ux4g-lg-of-none

Lg Of Scale Down ux4g-lg-of-scale-down

Xl Of Cover ux4g-xl-of-cover

Xl Of Contain ux4g-xl-of-contain

Xl Of Fill ux4g-xl-of-fill

Xl Of None ux4g-xl-of-none

Xl Of Scale Down ux4g-xl-of-scale-down

2xl Of Cover ux4g-2xl-of-cover

2xl Of Contain ux4g-2xl-of-contain

2xl Of Fill ux4g-2xl-of-fill

2xl Of None ux4g-2xl-of-none

2xl Of Scale Down ux4g-2xl-of-scale-down

``` ### 2. Object Fit — Object Fit: Cover HTML: ```html

``` React: ```jsx import React from 'react'; const ObjectFitExample2Demo = () => ( <>

); export default ObjectFitExample2Demo; ``` Angular: ```html

``` ### 3. Object Fit — Object Fit: Contain HTML: ```html

``` React: ```jsx import React from 'react'; const ObjectFitExample3Demo = () => ( <>

); export default ObjectFitExample3Demo; ``` Angular: ```html

``` ### 4. Object Fit — Object Fit: Fill HTML: ```html

``` React: ```jsx import React from 'react'; const ObjectFitExample4Demo = () => ( <>

); export default ObjectFitExample4Demo; ``` Angular: ```html

``` ### 5. Object Fit — Object Fit: None HTML: ```html

``` React: ```jsx import React from 'react'; const ObjectFitExample5Demo = () => ( <>

); export default ObjectFitExample5Demo; ``` Angular: ```html

``` ### 6. Object Fit — Object Fit: Scale Down HTML: ```html

``` React: ```jsx import React from 'react'; const ObjectFitExample6Demo = () => ( <>

); export default ObjectFitExample6Demo; ``` Angular: ```html

``` ### 7. Object Position — Object Position: Center HTML: ```html

``` React: ```jsx import React from 'react'; const ObjectFitExample7Demo = () => ( <>

); export default ObjectFitExample7Demo; ``` Angular: ```html

``` ### 8. Object Position — Object Position: Top HTML: ```html

``` React: ```jsx import React from 'react'; const ObjectFitExample8Demo = () => ( <>

); export default ObjectFitExample8Demo; ``` Angular: ```html

``` ### 9. Object Position — Object Position: Bottom HTML: ```html

``` React: ```jsx import React from 'react'; const ObjectFitExample9Demo = () => ( <>

); export default ObjectFitExample9Demo; ``` Angular: ```html

``` ### 10. Object Position — Object Position: Left HTML: ```html

``` React: ```jsx import React from 'react'; const ObjectFitExample10Demo = () => ( <>

); export default ObjectFitExample10Demo; ``` Angular: ```html

``` ### 11. Object Position — Object Position: Right HTML: ```html

``` React: ```jsx import React from 'react'; const ObjectFitExample11Demo = () => ( <>

); export default ObjectFitExample11Demo; ``` Angular: ```html

``` ### 12. Object Position — Object Position: Top Left HTML: ```html

``` React: ```jsx import React from 'react'; const ObjectFitExample12Demo = () => ( <>

); export default ObjectFitExample12Demo; ``` Angular: ```html

``` ### 13. Object Position — Object Position: Bottom Right HTML: ```html

``` React: ```jsx import React from 'react'; const ObjectFitExample13Demo = () => ( <>

); export default ObjectFitExample13Demo; ``` Angular: ```html

``` ## CSS class reference The following CSS partials define the Object Fit utility classes used in the examples above: ### object-fit.utilities.css ```css /* OBJECT FIT */ .ux4g-of-cover { object-fit: cover; } .ux4g-of-contain { object-fit: contain; } .ux4g-of-fill { object-fit: fill; } .ux4g-of-none { object-fit: none; } .ux4g-of-scale-down { object-fit: scale-down; } /* OBJECT POSITION BASE */ .ux4g-op { object-position: var(--ux4g-op, center); } /* POSITION PRESETS */ .ux4g-op-center { --ux4g-op: center; } .ux4g-op-top { --ux4g-op: top; } .ux4g-op-bottom { --ux4g-op: bottom; } .ux4g-op-left { --ux4g-op: left; } .ux4g-op-right { --ux4g-op: right; } /* OPTIONAL CORNERS */ .ux4g-op-top-left { --ux4g-op: top left; } .ux4g-op-top-right { --ux4g-op: top right; } .ux4g-op-bottom-left { --ux4g-op: bottom left; } .ux4g-op-bottom-right { --ux4g-op: bottom right; } /* FLUID IMAGE FIX */ .ux4g-img-fluid { display: block; max-width: 100%; height: auto; } /* SM ≥ 576px */ @media (min-width: 576px) { .ux4g-sm-of-cover { object-fit: cover; } .ux4g-sm-of-contain { object-fit: contain; } .ux4g-sm-of-fill { object-fit: fill; } .ux4g-sm-of-none { object-fit: none; } .ux4g-sm-of-scale-down { object-fit: scale-down; } } /* MD ≥ 768px */ @media (min-width: 768px) { .ux4g-md-of-cover { object-fit: cover; } .ux4g-md-of-contain { object-fit: contain; } .ux4g-md-of-fill { object-fit: fill; } .ux4g-md-of-none { object-fit: none; } .ux4g-md-of-scale-down { object-fit: scale-down; } } /* LG ≥ 992px */ @media (min-width: 992px) { .ux4g-lg-of-cover { object-fit: cover; } .ux4g-lg-of-contain { object-fit: contain; } .ux4g-lg-of-fill { object-fit: fill; } .ux4g-lg-of-none { object-fit: none; } .ux4g-lg-of-scale-down { object-fit: scale-down; } } /* XL ≥ 1200px */ @media (min-width: 1200px) { .ux4g-xl-of-cover { object-fit: cover; } .ux4g-xl-of-contain { object-fit: contain; } .ux4g-xl-of-fill { object-fit: fill; } .ux4g-xl-of-none { object-fit: none; } .ux4g-xl-of-scale-down { object-fit: scale-down; } } /* 2XL ≥ 1400px */ @media (min-width: 1400px) { .ux4g-2xl-of-cover { object-fit: cover; } .ux4g-2xl-of-contain { object-fit: contain; } .ux4g-2xl-of-fill { object-fit: fill; } .ux4g-2xl-of-none { object-fit: none; } .ux4g-2xl-of-scale-down { object-fit: scale-down; } } ``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.