Aspect Ratio

Reference

shilp.config.jscopy to clipboard
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    layout: {
      ratio: {
        property: "aspect-ratio: <v><i>;",
        values: {
          auto: "auto",
          square: "1/1",
          video: "16/9",

          photo: {
            DEFAULT: "4/3",
            wide: "5/4",
            wider: "3/2",
            widest: "16/9",
          },

          cinema: {
            DEFAULT: "1.85/1",
            wide: "2.39/1",
            "70mm": "2.76/1",
          },

          display: {
            DEFAULT: "16/9",
            tall: "16/10",
            wide: "18/9",
            wider: "19.5/9",
            widest: "21/9",
          },
        },
      },
    },
  },
};

export default shilpConfig;