{"id":13564202,"url":"https://github.com/yisibl/postcss-aspect-ratio-mini","last_synced_at":"2025-04-09T23:16:12.608Z","repository":{"id":22662966,"uuid":"96977114","full_name":"yisibl/postcss-aspect-ratio-mini","owner":"yisibl","description":"A PostCSS plugin to fix an element's dimensions to an aspect ratio","archived":false,"fork":false,"pushed_at":"2021-11-25T13:41:16.000Z","size":14,"stargazers_count":132,"open_issues_count":6,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-09T23:16:06.540Z","etag":null,"topics":["aspect-ratio","css","postcss","postcss-plugin","postcss-plugins"],"latest_commit_sha":null,"homepage":"","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/yisibl.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":"2017-07-12T07:14:12.000Z","updated_at":"2024-11-13T01:57:30.000Z","dependencies_parsed_at":"2022-07-27T03:17:23.431Z","dependency_job_id":null,"html_url":"https://github.com/yisibl/postcss-aspect-ratio-mini","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibl%2Fpostcss-aspect-ratio-mini","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibl%2Fpostcss-aspect-ratio-mini/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibl%2Fpostcss-aspect-ratio-mini/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibl%2Fpostcss-aspect-ratio-mini/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yisibl","download_url":"https://codeload.github.com/yisibl/postcss-aspect-ratio-mini/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125591,"owners_count":21051770,"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","postcss-plugins"],"created_at":"2024-08-01T13:01:27.916Z","updated_at":"2025-04-09T23:16:12.570Z","avatar_url":"https://github.com/yisibl.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[travis]:       https://travis-ci.org/yisibl/postcss-aspect-ratio-mini\n[travis-img]:   https://img.shields.io/travis/yisibl/postcss-aspect-ratio-mini.svg\n# PostCSS Aspect Ratio Mini [![Travis Build Status][travis-img]][travis]\n\nA PostCSS plugin to fix an element's dimensions to an aspect ratio.\n\nThere is already a standard [aspect-ratio](https://drafts.csswg.org/css-sizing-4/#aspect-ratio) in the CSS specification, and Chrome has [experimental support](https://bugs.chromium.org/p/chromium/issues/detail?id=1045668#c16). **So it is recommended to use `/` to separate values, the next version may deprecate `:` separator.**\n\n## Install\n\n```shell\nnpm i postcss-aspect-ratio-mini --save\n```\n\n## Usage\n\n```js\nvar postcss = require('postcss')\n\nvar output = postcss()\n  .use(require('postcss-aspect-ratio-mini'))\n  .process(require('fs').readFileSync('input.css', 'utf8'))\n  .css\n```\n\n## Example\n\nA simple example using the custom ratio value `16 / 9`.\n\n\n### Input\n\n```css\n.aspect-box {\n    position: relative;\n}\n\n.aspect-box {\n    aspect-ratio: 16 / 9;\n}\n\n.aspect-box2 {\n    aspect-ratio: 0.1 / 0.3;\n}\n```\n\n### Output\n\n```css\n.aspect-box {\n    position: relative;\n}\n\n.aspect-box:before {\n    padding-top: 56.25%;\n}\n\n.aspect-box2:before {\n    padding-top: 300%;\n}\n```\n\n## Test\n\n```shell\nnpm test\n```\n\n## [Changelog](CHANGELOG.md)\n\n## [License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisibl%2Fpostcss-aspect-ratio-mini","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyisibl%2Fpostcss-aspect-ratio-mini","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisibl%2Fpostcss-aspect-ratio-mini/lists"}