➡️ Live version of this demo is available at https://irregular-shapes-demo.frameright.io.
The demo is just a single static HTML file, which can be opened locally in the browser. The source contains configuration for Five Server for development hot-reloading, but it or any other tooling is not needed.
The demo is intended for modern browsers. See our Developer portal for polyfills for older browsers.
Not all containers are rectangles. IDC metadata can be used to fit image assets into any desired shape. By using IDC metadata regions, you can define the specific region of the image that will be displayed and you choose which region to show in different situations. You can define as many regions as needed.
Toggle between the IDC and mobile view buttons to see how the image behaves with and without the IDC metadata. You can also test it with your own images by following the steps below:
- Open an image file in Frameright.
- Use the irregular shapes definitions: Common sizes > Frameright Demo > Irregular Desktop/Mobile Left/Right.
- Save the file.
- Locate the file in your downloads folder and drag and drop it onto the left or right image area.
- Live version of this demo is available at https://irregular-shapes-demo.frameright.io
- Documentation for IDC open-source components and libraries is available on the Frameright developer portal
- Learn more about about Frameright and Image Display Control