{"id":13432976,"url":"https://github.com/wentin/ResponsifyJS","last_synced_at":"2025-03-17T10:33:07.529Z","repository":{"id":149047118,"uuid":"46770451","full_name":"wentin/ResponsifyJS","owner":"wentin","description":"A jquery plugin that makes images truly responsive, without sacrificing anyone's face. Give it more stars!","archived":false,"fork":false,"pushed_at":"2020-11-25T22:57:54.000Z","size":65707,"stargazers_count":1314,"open_issues_count":9,"forks_count":79,"subscribers_count":44,"default_branch":"master","last_synced_at":"2025-01-28T14:47:23.370Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://responsifyjs.wentin.net/","language":"HTML","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/wentin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-11-24T06:00:06.000Z","updated_at":"2024-11-24T13:51:05.000Z","dependencies_parsed_at":"2023-04-26T17:32:27.894Z","dependency_job_id":null,"html_url":"https://github.com/wentin/ResponsifyJS","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/wentin%2FResponsifyJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wentin%2FResponsifyJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wentin%2FResponsifyJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wentin%2FResponsifyJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wentin","download_url":"https://codeload.github.com/wentin/ResponsifyJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244016914,"owners_count":20384235,"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":[],"created_at":"2024-07-31T02:01:19.285Z","updated_at":"2025-03-17T10:33:07.521Z","avatar_url":"https://github.com/wentin.png","language":"HTML","readme":"# Responsify.js\n\n`A jquery plugin that makes images truly responsive, without sacrificing anyone's face :D`\n\nWhen images are used in a responsive container on web design, because of the container can change to any width:height ratio, a group shot could end up being cut off on people's faces, a nice photograph following \"rule of third\" could end up with no object in view. Responsive images face the challenge of how to keep the focused objects/area in view, this jquery plugin is here to solve the problem.\n\n### Download\n* [responsify.js](https://raw.githubusercontent.com/wentin/ResponsifyJS/master/responsify.js)\n* [responsify.min.js](https://raw.githubusercontent.com/wentin/ResponsifyJS/master/responsify.min.js)\n\n### Demo\n\n[https://responsifyjs.wentin.net/](https://responsifyjs.wentin.net/)\n\n### App\n\n[https://responsifyjs.wentin.net/app](https://responsifyjs.wentin.net/app)\n\nUse this interactive web app to generate the focus area data\n\n### What it does\n\nResponsify.js does the following:\n 1. It allows you define a focus area on an image using `data-focus-xxx` tag\n 2. It takes in the focus area data from the image, calcuate the image's container's size, resize and position the image accordingly, make sure the focus area is always in view and in the best position possible.\n\n* Responsive image **with** responsify.js\n\n![with-s](https://cloud.githubusercontent.com/assets/2474904/11459461/dccd59b6-96a4-11e5-81c6-5b16c7d30a23.gif) [play it yourself](http://wentin.github.io/ResponsifyJS/comparison/with-responsify-js/)\n\n* Responsive image **without** responsify.js\n\n![without-s](https://cloud.githubusercontent.com/assets/2474904/11459460/dccd53bc-96a4-11e5-8a33-bea161ef60a9.gif) [play it yourself](http://wentin.github.io/ResponsifyJS/comparison/without-responsify-js/)\n\n### How to use\n 1. Use this interactive web app to generate the focus area data [http://responsifyjs.space/app/](http://responsifyjs.space/app/)\n \n ```\n    \u003cimg src=\"image.png\" alt=\"\" \n    data-focus-left=\".30\" data-focus-top=\".12\" data-focus-right=\".79\" data-focus-bottom=\".66\" /\u003e\n ```\n`data-focus-left` is the focus area's left position comparing to the image's full width, in decimal. For example, if the full width is 300px, the focus area's left is 90, then the `data-focus-left` should be 90/300 = `0.3`. Same logic applies to other three data attributes.\n\n 2. Embed the responsify.js in the html\n \n ``` \n    \u003cscript src=\"responsify.js\"\u003e\u003c/script\u003e\n ``` \n 3. Call responsify function when window object is loaded\n \n ``` \n    $(window).load(function() {\n      $('img').responsify();\n    });\n ```\n 4. Call responsify function again when the window is being resized (optional)\n \n  ```\n    $(window).resize(function(){\n      $('img').responsify();\n    })\n  ```\n  \n\n###Contact Me\n* Follow [@DesignJokes](http://twitter.com/DesignJokes) on Twitter\n* Email \u003czhangwenting111@gmail.com\u003e\n\n###Other Project by Wentin\n* [Type Detail](http://typedetail.com/)\n* [underline.js](https://github.com/wentin/underlineJS)\n","funding_links":[],"categories":["HTML","13. 页面交互"],"sub_categories":["13.4 图片轮播(幻灯片)/图片展示"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwentin%2FResponsifyJS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwentin%2FResponsifyJS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwentin%2FResponsifyJS/lists"}