{"_id":"plastic-aspect-ratio","_rev":"2-6835b04ba08fbd25e211d1c3141daa49","name":"plastic-aspect-ratio","dist-tags":{"latest":"2.0.1"},"versions":{"2.0.0":{"description":"A Polymer 2.0 Custom Element Where the Height Depends on the Width","keywords":["polymer","polymer 3.0","aspect","aspect ratio","ratio","container","responsive","3.0","custom-element","web-components"],"name":"plastic-aspect-ratio","version":"2.0.0","resolutions":{"inherits":"2.0.3","samsam":"1.1.3","supports-color":"3.1.2","type-detect":"1.0.0","@webcomponents/webcomponentsjs":"2.0.0-beta.2"},"main":"plastic-aspect-ratio.js","license":"MIT","dependencies":{"@polymer/polymer":"^3.0.0"},"devDependencies":{"@polymer/iron-demo-helpers":"^3.0.0-pre.18","@webcomponents/webcomponentsjs":"^2.0.0","wct-browser-legacy":"^0.0.1-pre.11","plastic-image":"^3.0.2"},"gitHead":"36529827e284cf77abc5ff349ade7dd5636630db","_id":"plastic-aspect-ratio@2.0.0","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"mlisook","email":"murray@lisook.net"},"dist":{"integrity":"sha512-JQCB59htIhv1C+lwhN46Aeq+unDMST7SCbCJK2pMoT0fhf2AXprhweyjXskhXoAKTCtaVZ6pgXpGdfT9ZbdQdA==","shasum":"78feb14b8028015e136de46ca590670c606c58da","tarball":"https://registry.npmjs.org/plastic-aspect-ratio/-/plastic-aspect-ratio-2.0.0.tgz","fileCount":23,"unpackedSize":416955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOYTyCRA9TVsSAnZWagAAS9UP/3TWD/RTBLLpcUXGnORl\noXY1h1bJG8igFFIBALI0cMm+z/1Z4DSL16L+97tcvHS5tVPZGJS1/OIgP32X\nft6HxXb17JKy/UkAPf73hEWbd9eIJ/H6gR5m2nZIgLV8E9Ix5PF+3aZrNtR4\n4bnm5tK/EspTioM2RdpewLsi6cZeXHkaGWugcE1z7O1BmjNf5k9QuHs/mi2q\nnPMFBpSDKvzFPSvWIU8akylETEsHiDp1NkjxLrvsjgiZ1+2ztFcGtBsioOIm\nQh6OJ26glAceJmNSbVlbT8iJsUFHvkMkbLtdplFGyXZKQB5+lDOF6QcQxP/3\nGPPqAiBQcj3wX8ADv5YbvmMcGS7PG1awW09RHi8hK3nsL4OOSKCvyBzPM6nI\n9UR2IiKBcd8JJy12YJOBjKZwEJutWl8GEMcjsOlvtLHYh7kkHqXMbk8vAM2M\nVErw5a6rZC9qJye2+KWu+aSVRk6z5/BuujSlioCCz0yj0eyPiO0bDz678Ru3\nwr9fjgYBnoX4ZtJ/HCzJ3XPzibCJXYsf69+Mc1s17DFkkO1qslAQZUyldLcT\n/laAJD26QYY4ncqWbfZxYSi0XtxKclY5AE8BQ0fWFGfXeKNX0/IfqVMMMQMC\nOE35oXjtn4d5COzA5B0OC6figyyBSxprv4+PrhI546OY7Y76sbWz63Op9hJv\n5X0w\r\n=WZdd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCP2AxRX0wigzWWYbyO5TSqLeGrKCOiJsg+NOAuGZhs0gIhAMcU+TG+7ockEh/eyCQAGhLafU63h6ZkHjaa8cCPrDH/"}]},"maintainers":[{"name":"mlisook","email":"murray@lisook.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plastic-aspect-ratio_2.0.0_1530496242266_0.7817228024357878"},"_hasShrinkwrap":false},"2.0.1":{"description":"A Polymer 3.0 Custom Element Where the Height Depends on the Width","keywords":["polymer","polymer 3.0","aspect","aspect ratio","ratio","container","responsive","3.0","custom-element","web-components"],"name":"plastic-aspect-ratio","version":"2.0.1","repository":{"type":"git","url":"git+https://github.com/mlisook/plastic-aspect-ratio.git"},"resolutions":{"inherits":"2.0.3","samsam":"1.1.3","supports-color":"3.1.2","type-detect":"1.0.0","@webcomponents/webcomponentsjs":"2.0.0-beta.2"},"main":"plastic-aspect-ratio.js","license":"MIT","dependencies":{"@polymer/polymer":"^3.0.0"},"devDependencies":{"@polymer/iron-demo-helpers":"^3.0.0-pre.18","@webcomponents/webcomponentsjs":"^2.0.0","wct-browser-legacy":"^0.0.1-pre.11","plastic-image":"^3.0.2"},"gitHead":"9bb9e392ccb7f35f1ec3926260e0302823ca7a06","bugs":{"url":"https://github.com/mlisook/plastic-aspect-ratio/issues"},"homepage":"https://github.com/mlisook/plastic-aspect-ratio#readme","_id":"plastic-aspect-ratio@2.0.1","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"mlisook","email":"murray@lisook.net"},"dist":{"integrity":"sha512-UTb8+Yaq05c9njGkT4T/h5VQos/XDiMyVFVkfZQzYeG8UVOSrVvWwEwKkHeZ1/rYpH2ESnhT5R1qw1jigamjSg==","shasum":"603cf736ccc3640da628fa19a98ca4cebff9b03d","tarball":"https://registry.npmjs.org/plastic-aspect-ratio/-/plastic-aspect-ratio-2.0.1.tgz","fileCount":23,"unpackedSize":417066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOYeDCRA9TVsSAnZWagAAIDkP/A40/fM2iA1jclEVmYP8\nKOx3BGk0ouOWL5tNigEy7fuQBP66YFBAWeyhiVm0DU6P5k6EkX9qjnnRJGcY\njAsN6JGzLaGh5EZOZ5FprgkyHu+HDvqJiNh7NvGkl6a7KWtgDJV1+nldU/m3\nanFHY/D470Sa7I+AU6WYcm8IgKfLAPaN5naIE1FHfuQsM1ojEuAC7YjqTh1H\nUpvApb5Ei7kcmroIZBjI/6sQVsdO/0gHXT9/Qj15drouWkN1RgMFcGIkFSbL\n1425TmKbmRnWB5doZ6TOh0IUgzYVkWuhoS+F5MA3sMJwAKFCEz8v5KhKnAj3\n2Q0ruauWamLBy84YO54YFYSfNSG2U1nRF27iLFLTINtyjNi2RWyO71ZoWcgU\nHHc6B7tmGx01AFWPSCY3UMDo3tz9GZMzevg60DgspA48dvRGJSCrYdkLTSSj\nfERXZW1BdK5JhZRntx1GcCr+PRwj80zNCLYuT7jueiiP+/Pp2rlvmqkQ8jYk\nYYOe6c0hG2cSkZ9mm5ehoHuvAuhSVS2XTTwpqo+3p8UjAoJ0ZL0GeogqPbOl\ngB157sSKoj1LyeOADFIBlKQaKxthlrRmQdWisiXfzP9AoJUnhLvGGUbaozRO\n7Y4mOpx7Qnq/xwq1qob3S7PB5DD6eJBC9EsBYtxDJaZ2wUrliwCWtrAvuevA\nFAQJ\r\n=AZjj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGKJOEwoQC0jHDpa7kOlbrpg20yhcZYG/wrHD2JKX0SXAiEA8/DJ5CaM7DFmuKX1cCgVo44sZE5r3nvUPl0LDpTfO+o="}]},"maintainers":[{"name":"mlisook","email":"murray@lisook.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plastic-aspect-ratio_2.0.1_1530496899016_0.526920286258407"},"_hasShrinkwrap":false}},"time":{"created":"2018-07-02T01:50:42.266Z","2.0.0":"2018-07-02T01:50:42.412Z","modified":"2022-05-13T01:18:18.261Z","2.0.1":"2018-07-02T02:01:39.220Z"},"maintainers":[{"name":"mlisook","email":"murray@lisook.net"}],"description":"A Polymer 3.0 Custom Element Where the Height Depends on the Width","keywords":["polymer","polymer 3.0","aspect","aspect ratio","ratio","container","responsive","3.0","custom-element","web-components"],"license":"MIT","readme":"# \\<plastic-aspect-ratio\\>\r\n\r\nA Polymer 3.0 Custom Element Where the Height Depends on the Width\r\n\r\nThis allows you to set the width in any way, by percentage for example,\r\nand still have the container retain its width to height aspect ratio.\r\n\r\nThe element is also available for Polymer 2 - see install instructions below.\r\n\r\n## Examples\r\n```HTML\r\n<plastic-aspect-ratio style=\"width: 45%;\" aspect-width=\"1024\" aspect-width=\"768\">\r\n  <img src=\"foo.jpg\" style=\"width:100%;height:100%\">\r\n</plastic-aspect-ratio>\r\n```\r\nTypically you will style a single content item with width:100%, height:100%.\r\n\r\n```HTML\r\n<plastic-aspect-ratio style=\"width: 100%;\" aspect-width=\"16\" aspect-width=\"9\">\r\n  <plastic-image  style=\"width:100%;height:100%\" lazy-load preload fade sizing=\"contain\" use-element-dim\r\n    srcset=\"images/foo-s.jpg 150w, images/foo-sh.jpg 150w 2.0x, images/foo-m.jpg 405w, \r\n    images/foo-mh 2.0x 405w, images/foo-l 1024w, images/foo-t 500w 750h\" placeholder=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAmElEQVQImWNmYGBgSExMzBATE7dSVFT8eO/evTcMDAwMjIFe5iYSIjybL136cunNW56FulIaEoJcfBdY5GWjvJ4/+SJhIcUhwavI5SbIxR+YvzRqH8unx7/Osf8VYpAVEWLgZuO8ljrfbwMDAwMD07u/j/ZYun5f9JfjSfGnHx9dGaCAJcBimwXjZ4Z+HllGn0XbXr+ASQAAi5UxQq88/fsAAAAASUVORK5CYII=\">\r\n    </plastic-image>\r\n</plastic-aspect-ratio>\r\n```\r\n\r\nYou don't have to use only a single content item. Anything that could be in a div is fine.\r\n```HTML\r\n<plastic-aspect-ratio style=\"width: 100%;\" aspect-width=\"16\" aspect-width=\"9\">\r\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit mauris eu ante dignissim porta. Integer non tellus tincidunt, tristique erat vel, pretium nisi.</p>\r\n  <paper-input label=\"consectetur\"></paper-input>\r\n</plastic-aspect-ratio>\r\n```\r\n\r\n## Install\r\n### For Polymer 3 Projects\r\n`npm i --save plastic-aspect-ratio`\r\n\r\n### For Polymer 2 Projects\r\n`bower install --save mlisook/plastic-aspect-ratio#^1.0.0`\r\n\r\n## Issues and Contributions\r\n\r\nPlease file issues on the github page. Contributions via pull request are certainly welcome and appreciated. \r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md","homepage":"https://github.com/mlisook/plastic-aspect-ratio#readme","repository":{"type":"git","url":"git+https://github.com/mlisook/plastic-aspect-ratio.git"},"bugs":{"url":"https://github.com/mlisook/plastic-aspect-ratio/issues"}}