properties
changelog

Aspect Ratio

Set aspect ratio (width-to-height) for elements.

Usage:

  • @layout ratio-*;

Reference

shilp.config.js
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;