# CSS Object-fit

## **`object-fit` property**

The `object-fit` property in CSS is used to specify how an element should resize its content to fit within its container. It determines how the content of an replaced element, such as an image, video, or iframe, should be resized to fit its container box.

### Syntax

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

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

### Values

* `fill`: The replaced element is stretched to fill the content box, potentially distorting its aspect ratio.
* `contain`: The replaced element is resized to maintain its aspect ratio while fitting within the content box.
* `cover`: The replaced element is resized to maintain its aspect ratio while covering the entire content box.
* `none`: The replaced element is not resized, preserving its original size.
* `scale-down`: The content is sized as if `none` or `contain`, whichever results in a smaller concrete object size.

### Examples

**Example 1: Using `object-fit: fill;`**

```css
img {
  width: 200px;
  height: 150px;
  object-fit: fill;
}
```

**Example 2: Using `object-fit: contain;`**

```css
video {
  width: 300px;
  height: 200px;
  object-fit: contain;
}
```

**Example 3: Using `object-fit: cover;`**

```css
iframe {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
```

## **`object-position` property**

The `object-position` property specifies the alignment of the replaced element within its box.

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

/* Length values */
object-position: 50% 50%;
object-position: 10px 20px;

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

### Values

* **Keyword values**: These include `top`, `bottom`, `left`, `right`, and `center`, which specify the position of the content within the container.
* **Length values**: These include lengths such as `10px`, `50%`, etc., which specify the position of the content relative to the top-left corner of the container.

### Examples

**Example 1: Using Keyword Values**

```css
img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  object-position: center;
}
```

**Example 2: Using Length Values**

```css
video {
  width: 300px;
  height: 200px;
  object-fit: contain;
  object-position: 50% 50%;
}
```

## Conclusion

In summary, the `object-fit` and `object-position` properties in CSS offer powerful capabilities for adjusting the display and alignment of replaced elements like images, videos, or iframes within their container boxes.

Understanding these properties enables developers to effectively control how content is resized and positioned, ensuring optimal layout and visual presentation across different devices and screen sizes.
