How do I make one Product Image render at different sizes depending on variant?

[HenrietteVB]

Hi there, 

My client sells limited edition photography. 

I have set up options for each print using a Product Options app. The options to choose are SIZE and FRAME COLOR. 
I would like the product image:

1. to render at different sizes depending on the SIZE chosen
2. and to show the corresponding frame (color)

An example of what I am looking for is:
https://houseofspoils.com/products/lella-soper-the-lake-house?horizontal=&variant=40891653816382

Any suggestions how to approach this? 

Thanks! 

[oscprofessional]

Hello @HenrietteVB 

For this you need to create the variants (Size and Color )for the products. 

And for the particular size you need to assign relatable size with color

Thank you.

[HenrietteVB]

Regular variants do not work for my client. Not all sizes come in all frame options. Moreover, their product are limited editions - there are only 30 available independent of size. The regular variants do not allow for this. 
But even if I would go for regular product variants - I think that still wouldn't solve the issue? 
If you look at the example I sent you can see in the code that there is one single product image for the main product, that renders at different sizes, depending on the size. Also, there is separate div that holds the frame image (that varies based on size and frame color), and the photograph is in another div > layered on top and fitting in perfectly.