properties
changelog

Object Fit and Position

Control graphical elements size and position inside container.

Usage:

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

Reference

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;