diff --git a/src/hooks/useHasFocus/useHasFocus.test.tsx b/src/hooks/useHasFocus/useHasFocus.test.tsx
index f5bfed7..d780188 100644
--- a/src/hooks/useHasFocus/useHasFocus.test.tsx
+++ b/src/hooks/useHasFocus/useHasFocus.test.tsx
@@ -1,6 +1,6 @@
/* eslint-disable react/jsx-no-literals */
/* eslint-disable react/no-multi-comp */
-import { act, render, waitFor } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
import { useRef, type ReactElement } from 'react';
import { useHasFocus } from './useHasFocus.js';
diff --git a/src/index.ts b/src/index.ts
index 4670f9f..402a77a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -18,3 +18,4 @@ export * from './hooks/useToggle/useToggle.js';
export * from './hooks/useUnmount/useUnmount.js';
export * from './hooks/useWindowEventListener/useWindowEventListener.js';
export * from './utils/arrayRef/arrayRef.js';
+export * from './utils/objectFit/objectFit.js';
diff --git a/src/utils/objectFit/objectFit.mdx b/src/utils/objectFit/objectFit.mdx
new file mode 100644
index 0000000..1a31acf
--- /dev/null
+++ b/src/utils/objectFit/objectFit.mdx
@@ -0,0 +1,155 @@
+import { Meta } from '@storybook/blocks';
+
+
+
+# objectFit
+
+This util mimics the CSS property `object-fit` for all HTML elements;
+
+It exports two reusable methods: `contain` and `cover`. Given the sizes of an parent element and its
+child element: Contain returns the size to be applied to the element to let it fits its parent and
+keeping its apect ratio. Cover returns the size to be applied to the element to let it fill its
+parent, keeping its aspect ratio, most likely overflowing the parent element.
+
+If the sizes or aspect ratio are initially known, it's better to use values instead of retrieving
+sizes from an image because its faster from a performance perspective.
+
+## Reference
+
+```ts
+function objectFit(fit: 'contain' | 'cover') {
+ return (
+ parentWidth: number,
+ parentHeight: number,
+ childWidth: number,
+ childHeight: number,
+ ): { x: number; y: number; width: number; height: number; scale: number; cssText: string } => {
+ if ([parentWidth, parentHeight, childWidth, childHeight].some((value) => value <= 0)) {
+ throw new Error(`All arguments should have a positive value`);
+ }
+
+ const mathMethod = fit === 'contain' ? Math.min : Math.max;
+ const scale = mathMethod(parentWidth / childWidth, parentHeight / childHeight);
+ const width = Math.ceil(childWidth * scale);
+ const height = Math.ceil(childHeight * scale);
+ const x = Math.trunc((parentWidth - width) * 0.5);
+ const y = Math.trunc((parentHeight - height) * 0.5);
+
+ return {
+ x,
+ y,
+ width,
+ height,
+ scale,
+ cssText: `left:${x}px;top:${y}px;width:${width}px;height:${height}px;`,
+ };
+ };
+}
+
+export const contain = objectFit('contain');
+export const cover = objectFit('cover');
+```
+
+### Parameters
+
+- parentWidth: number
+- parentHeight: number
+- childWidth: number
+- childHeight: number
+
+### Returns
+
+An object containing:
+
+- x: number
+- y: number
+- width: number
+- height: number
+- scale: number
+- cssText: string (easily add CSS values to child element)
+
+## Usage
+
+Contain:
+
+With the contain method you can use both position absolute and relative on the child element.
+Relative can be useful if you want to position elements inside absolute to the parent.
+
+```tsx
+import { contain } from './objectFit.js';
+
+export function Contain(): ReactElement {
+ const parentRef = useRef(null);
+ const childRef = useRef(null);
+
+ const onResize = useCallback(() => {
+ if (!parentRef.current || !childRef.current) {
+ return;
+ }
+
+ const objectFit = contain(parentRef.current.offsetWidth, parentRef.current.offsetHeight, 1, 1);
+
+ childRef.current.style.cssText += objectFit.cssText;
+ }, [parentRef, childRef]);
+
+ useResizeObserver(parentRef, onResize);
+
+ return (
+
+ );
+}
+```
+
+Cover:
+
+With contain you need to use position absolute to position the child.
+
+```tsx
+import { cover } from './objectFit.js';
+
+export function Cover(): ReactElement {
+ const parentRef = useRef(null);
+ const childRef = useRef(null);
+
+ const onResize = useCallback(() => {
+ if (!parentRef.current || !childRef.current) {
+ return;
+ }
+
+ const objectFit = cover(
+ parentRef.current.offsetWidth,
+ parentRef.current.offsetHeight,
+ 1920,
+ 1080,
+ );
+
+ childRef.current.style.cssText += objectFit.cssText;
+ }, [parentRef, childRef]);
+
+ useResizeObserver(parentRef, onResize);
+
+ return (
+
+ );
+}
+```
diff --git a/src/utils/objectFit/objectFit.stories.tsx b/src/utils/objectFit/objectFit.stories.tsx
new file mode 100644
index 0000000..86a8f00
--- /dev/null
+++ b/src/utils/objectFit/objectFit.stories.tsx
@@ -0,0 +1,101 @@
+/* eslint-disable react/no-multi-comp */
+import { type ReactElement, useCallback, useRef } from 'react';
+import { useResizeObserver } from '../../hooks/useResizeObserver/useResizeObserver.js';
+import { contain, cover } from './objectFit.js';
+
+export default {
+ title: 'utils/objectFit',
+};
+
+export function Contain(): ReactElement {
+ const parentRef = useRef(null);
+ const childRef = useRef(null);
+ const infoRef = useRef(null);
+
+ const onResize = useCallback(() => {
+ if (!parentRef.current || !childRef.current || !infoRef.current) {
+ return;
+ }
+
+ const objectFit = contain(parentRef.current.offsetWidth, parentRef.current.offsetHeight, 1, 1);
+ childRef.current.style.cssText += objectFit.cssText;
+
+ infoRef.current.innerHTML = JSON.stringify(objectFit);
+ }, [parentRef, childRef, infoRef]);
+
+ useResizeObserver(parentRef, onResize);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+