https://github.com/ryanseddon/picture-component

<x-picture> element for responsive images
https://github.com/ryanseddon/picture-component

Last synced: 30 days ago
JSON representation

<x-picture> element for responsive images

• Host: GitHub
• URL: https://github.com/ryanseddon/picture-component
• Owner: ryanseddon
• Created: 2013-07-15T10:23:14.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-07-22T06:16:17.000Z (over 11 years ago)
• Last Synced: 2024-05-01T23:07:50.252Z (7 months ago)
• Homepage: http://ryanseddon.github.io/picture-component/example/
• Size: 686 KB
• Stars: 6
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Picture component

An implementation of the proposed `` element. See [original repo](https://github.com/scottjehl/picturefill) for something to actually use in production.

## How to use

This web component uses the Polymer library.

1. Make sure you have Polymers `platform.min.js` included in your page

1. Import component ``

1. A picture element is contained inside a `` element

1. For each sized image specify as `` inside ``

```html

    

    

    

```

## Experiment only

Please don't use this, that's what the [picturefill](https://github.com/scottjehl/picturefill) polyfill is for. This version is missing default image support and image swapping on resize.

## Made as part of talk

I did a talk on Web Components and created a whole bunch of components to dog food the talk itself. See master repo [web-components](https://github.com/ryanseddon/web-components).