{"id":25807890,"url":"https://github.com/arumi-s/svelte-scaled-view","last_synced_at":"2026-06-09T04:31:26.854Z","repository":{"id":201040392,"uuid":"635982810","full_name":"arumi-s/svelte-scaled-view","owner":"arumi-s","description":null,"archived":false,"fork":false,"pushed_at":"2024-04-23T08:53:57.000Z","size":98,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T05:26:38.186Z","etag":null,"topics":["resize-observer","svelte","sveltekit"],"latest_commit_sha":null,"homepage":"","language":"Svelte","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/arumi-s.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-03T22:02:35.000Z","updated_at":"2024-04-23T08:53:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"0e6a607a-c2d5-412b-94c2-437cd1e44973","html_url":"https://github.com/arumi-s/svelte-scaled-view","commit_stats":null,"previous_names":["arumi-s/svelte-scaled-view"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/arumi-s/svelte-scaled-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arumi-s%2Fsvelte-scaled-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arumi-s%2Fsvelte-scaled-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arumi-s%2Fsvelte-scaled-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arumi-s%2Fsvelte-scaled-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arumi-s","download_url":"https://codeload.github.com/arumi-s/svelte-scaled-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arumi-s%2Fsvelte-scaled-view/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34092253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["resize-observer","svelte","sveltekit"],"created_at":"2025-02-27T21:41:10.737Z","updated_at":"2026-06-09T04:31:26.625Z","avatar_url":"https://github.com/arumi-s.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte Scaled View Library\n\n[![NPM](https://img.shields.io/npm/v/svelte-scaled-view)](https://www.npmjs.com/package/svelte-scaled-view)\n![License](https://img.shields.io/npm/l/svelte-scaled-view)\n\nSvelte Scaled View provides a component called \"ScaledView\" that allows you to scale the content within it to fit its parent element using one of three strategies (contain, cover, and fill). It also allows you to clamp the scale ratio using an optional min and max prop.\n\n## Usage\n\n### Install\n\nFirst, install the library in your Svelte project from npm:\n\n```bash\nnpm install svelte-scaled-view\n```\n\n### Include\n\nThen, add it to your project:\n\n```typescript\nimport ScaledView from 'svelte-scaled-view';\n```\n\n### Basic\n\nOnce included, you can now use the ScaledView component in your project:\n\n```svelte\n\u003cdiv class=\"container_with_a_non_zero_size\"\u003e\n\t\u003cScaledView fit=\"contain\"\u003e\n\t\t\u003cdiv\u003eMy content to be scaled\u003c/div\u003e\n\t\u003c/ScaledView\u003e\n\u003c/div\u003e\n```\n\nIn the above example, the `fit` prop is set to `contain`, which will scale the content to fit the parent element while maintaining its aspect ratio.\n\nYou can also choose to use other scaling methods like `cover` and `fill`:\n\n```svelte\n\u003cScaledView fit=\"cover\"\u003e\n\t\u003cdiv\u003eMy content to be scaled\u003c/div\u003e\n\u003c/ScaledView\u003e\n```\n\nIn this case, the content will be scaled to cover its parent element while maintaining of aspect ratio.\n\nOr you can use `fill` to scale the content to fill its parent element, regardless of aspect ratio:\n\n```svelte\n\u003cScaledView fit=\"fill\"\u003e\n\t\u003cdiv\u003eMy content to be scaled\u003c/div\u003e\n\u003c/ScaledView\u003e\n```\n\n### Advanced\n\nYou may also pass in a `min` and `max` value to set a minimum and maximum scale ratio.\n\n```svelte\n\u003cScaledView fit=\"contain\" min={0.5} max={2}\u003e\n\t\u003cdiv\u003eMy content to be scaled\u003c/div\u003e\n\u003c/ScaledView\u003e\n```\n\nRetrieve the scale factors.\n\n```svelte\n\u003cdiv class=\"container_with_a_non_zero_size\"\u003e\n\t\u003cScaledView fit=\"contain\" let:scaleX let:scaleY\u003e\n\t\t\u003cdiv\u003ethis element is scaled by x:{scaleX} and y:{scaleY}\u003c/div\u003e\n\t\u003c/ScaledView\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farumi-s%2Fsvelte-scaled-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farumi-s%2Fsvelte-scaled-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farumi-s%2Fsvelte-scaled-view/lists"}