---
title: "Object Fit and Position | @layout"
description: "Control graphical elements size and position inside container."
keywords: ["layout", "object", "fit", "position"]
---

# Object Fit and Position

Control graphical elements size and position inside container.

Usage:

- `@layout object-fit-*;`
- `@layout object-position-*;`

<Alert variant="info">

This page contains only the **property configuration reference**. Complete
documentation and usage examples will be added progressively in future updates.

</Alert>

---

<section>

## Reference

```js title="shilp.config.js"
const shilpConfig = {
	source: "react",

	properties: {
		layout: {
			object: {
				fit: {
					property: "object-fit: <v><i>;",
					values: {
						none: "none",
						contain: "contain",
						cover: "cover",
						fit: "fit",
						scale: {
							down: "scale-down",
						},
					},
				},

				position: {
					property: "object-position: <v><i>;",
					values: {
						top: {
							DEFAULT: "top",
							left: "left top",
							right: "right top",
						},
						bottom: {
							DEFAULT: "bottom",
							left: "left bottom",
							right: "right bottom",
						},
						left: "left",
						right: "right",
						center: "center",
					},
				},
			},
		},
	},
};

export default shilpConfig;
```

</section>