Pinning Image Elements to Larger Elements in responsive pages


#1

Cannot find a way to synchronise images that make up a scene when the browser is subjected to resizing. The smaller objects will resize or move at different speeds and placement to a larger background image. Have tried all permutations of tinkering with element metrics in flexible layout options and building multiple layout versions. Simply always get an issue with the resizing. Also tried grouping smaller images to larger but same issue persists…

Is there a simple way to achieve fixed objects in flexible browser options? have provided an example page of this, with the kind of animated gif I want to pin to the larger background.

any help would be great
thanks


#2

Example.zip (795.1 KB)


#3

Group that element, adjust the group bounds to match the scene bounds, and set it to the same properties as your background image:

Example.zip (964.5 KB)


#4

That’s great! thanks, really thought we tried this approach in grouping but just retested from your version and it’s all working perfect. Our second issue on the same example is we lose the bottom of the background image in browser (even though inside scene boundary) or we have white borders on rescales based on if ‘zoom contents’ are on or not. What we want is just the full image to any recale in the browser (no loss of bottom of image) is there a perfect layout setting to achieve this?

thanks so much for your speedy help :slight_smile:


#5

Ensuring that the bottom doesn’t cut off means that you’re reducing its height – which as you noticed leaves white gaps on either side. Your best bet is to create a much wider image so it can fit in wider browser widths. Takes some playing around with to get the right trade offs :slight_smile:

Setting the image to expand beyond the borders of the scene (or beyond the scaled group boundaries of the left and right side) might get you to where you want to be.