Streaming live at 10am (PST)

Skew, fill image to fit help

#1

Hi anyone know if it possible to fit and image to fit a display of an image?


Here is my site Read-Only: https://preview.webflow.com/preview/emporiamedia?utm_source=emporiamedia&preview=2b64068c0e744708a4637a64163165dd
(how to share your site Read-Only link)

#2

Thats going to be almost impossible to get right. plus when the browser changes size, it will not line up. Why not just add the image to the iMac in photoshop?

#3

well, it’s the image is in a wrapper and its not the only one. I’m trying to making a scroll interaction which hide/shows different images of scroll with some parallax. I tried fixing points using figma to get the shape css code but it didn’t work.

#4

It is possible but it will require a large amount of time painstakingly fitting the shape of the image to the display screen.

Here is how I aligned it after a while. Here are the settings I have used for that: alignment and transforms. I also got rid of all unnecessary divs and classes. The wrapper div where the mac image and div with screenshot are located should have these parameters as well as children perspective set.

Then you must ensure that your screenshot has exactly same screen ratio that imac display. And then you will need to continue nudging and rotating and skewing untill it is perfectly fitting the image. Absolutely positioned elements should retain their look on all breakpoints.

1 Like