This demo shows how you can combine Image Display Control with irregularly shaped image containers.
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.
Learn more
- Demo source code is available on GitHub
- Documentation for IDC open-source components and libraries is available on the Frameright developer portal
- Learn more about about Frameright and Image Display Control