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
/** @type {import('shilpcss/types').ShilpConfig} */
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;

Published at:

Last updated at: