{"id":27373973,"url":"https://github.com/arccoza/postcss-aspect-ratio","last_synced_at":"2025-08-22T07:34:06.205Z","repository":{"id":57327767,"uuid":"50585528","full_name":"arccoza/postcss-aspect-ratio","owner":"arccoza","description":"A PostCSS plugin to fix an element's dimensions to an aspect ratio.","archived":false,"fork":false,"pushed_at":"2019-01-25T03:05:06.000Z","size":30,"stargazers_count":40,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-07T01:50:39.513Z","etag":null,"topics":["aspect-ratio","css","postcss","postcss-plugin"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arccoza.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-28T13:41:48.000Z","updated_at":"2024-10-24T05:43:37.000Z","dependencies_parsed_at":"2022-09-16T07:13:04.438Z","dependency_job_id":null,"html_url":"https://github.com/arccoza/postcss-aspect-ratio","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arccoza%2Fpostcss-aspect-ratio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arccoza%2Fpostcss-aspect-ratio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arccoza%2Fpostcss-aspect-ratio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arccoza%2Fpostcss-aspect-ratio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arccoza","download_url":"https://codeload.github.com/arccoza/postcss-aspect-ratio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248707604,"owners_count":21148920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aspect-ratio","css","postcss","postcss-plugin"],"created_at":"2025-04-13T11:36:06.317Z","updated_at":"2025-04-13T11:36:06.803Z","avatar_url":"https://github.com/arccoza.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[travis]:       https://travis-ci.org/arccoza/postcss-aspect-ratio\n[travis-img]:   https://img.shields.io/travis/arccoza/postcss-aspect-ratio.svg\n# PostCSS Aspect Ratio [![Travis Build Status][travis-img]][travis]\n\nA PostCSS plugin to fix an element's dimensions to an aspect ratio.\n\n## Explanation\nThe plugin provides three new properties and one new value type:\n  * The `aspect-ratio` property makes the height of this element relative to its width, `height` will be dynamic based on the ratio. `aspect-ratio` has two aliases you can use instead:\n    * `ratio`\n    * `aspect`\n  * An `aspect-ratio` property that includes a value expressed as `'NUM:NUM'` (eg. `'4:3'`) will automatically be converted to a percentage (3/4 * 100 = 75%). You must wrap the value in single ' or double \" quotes.\n\nThe effect is achieved using the quirky behaviour of CSS percentage padding; any element with a percentage value for its padding property will use the width of its container to calculate that percentage.\nTherefore this plugin requires a specific HTML structure to work. The element you wish to constrain with an aspect ratio and a single inner element that will hold its contents.\n\n```html\n\u003cdiv class=\"aspect-box\"\u003e\n  \u003cdiv class=\"aspect-box__content\"\u003e\n    \u003c!-- Any content you like, very useful for video and image elements. --\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Install\n`npm install postcss-aspect-ratio --save`\n\n## Example 1\nA simple example using the custom ratio value `'16:9'`.\n\n```css\n/* Input. */\n.aspect-box {\n  position: relative;\n  background: lime;\n  aspect-ratio: '16:9';\n}\n\n/* Output. */\n.aspect-box {\n  position: relative;\n  background: lime;\n  box-sizing: border-box;\n}\n\n.aspect-box \u003e * /* This targets .aspect-box__content */ {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0; \n  left: 0; \n  box-sizing: border-box;\n}\n\n.aspect-box:before /* This pseudo element uses the padding trick to set the height. */ {\n  position: relative;\n  display: block;\n  content: \"\";\n  padding-top: 56.25%;\n  box-sizing: border-box;\n}\n```\n\n## Example 2\nA more complex example using the ratio value `calc('4:3' - 20px)`.\n\n```css\n/* Input. */\n.aspect-box {\n  position: relative;\n  background: lime;\n  aspect-ratio: calc('4:3' - 20px);\n}\n\n/* Output. */\n.aspect-box {\n  position: relative;\n  background: lime;\n  box-sizing: border-box;\n}\n\n.aspect-box \u003e * {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0; \n  left: 0; \n  box-sizing: border-box;\n}\n\n.aspect-box:before {\n  position: relative;\n  display: block;\n  content: \"\";\n  padding-top: calc(75% - 20px);\n  box-sizing: border-box;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farccoza%2Fpostcss-aspect-ratio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farccoza%2Fpostcss-aspect-ratio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farccoza%2Fpostcss-aspect-ratio/lists"}