Archived topic
auto fit an svg image to frame?
8 replies · Started by Ema on April 6, 2021
Hello GP team
I'm making some svg frames to place over images.
I set the image as background - cover, then place the .svg image as an image on top, so that you can peek through to see the image below.
I've just got a wee problem with the sides of the image appearing out with the frame - either at the top or on the side. Is there a way to keep the svg image flush with the container?
see here how the image is bleeding beyond the frame - (splits on left and right sides)
Best Ema
Hi Ema,
I'm not able to see your screenshot and couldn't see the issue you described here, could you try to upload the screenshot again? Thanks!
Sorry, here it is. See how the background image peeks out from behind the .svg frame here
Thanks
Ema
Hi there,
the background image is throwing a 404 not found error on the page... so i see the SVG but not the image - can you check the background image URL is correct ?
Hi David,
Thanks for getting back to me on this.
oh yes, apologies, I was messing around with it.
I'm just not sure how to approach this, and can't find much on it.
The image is peeking out a lot more now so you can see. I'm not sure how to fit the .svg frame in image container - but not have the background image bleeding outwith the outer edges.
would it involve something like 'calc (100% -5px)'
Best Ema
Ooh thats really nice :)
Looking at the HTML of the page -the SVG images HTML is sitting outside if the grid container:
https://www.screencast.com/t/B6bzwxNqKxv
Did you edit the HTML ? It would be good to see the issue with the image inside the grid container... i don't want to propose a fix that could 'break' in the future if the block is invalidated.
Thanks David,
I really appreciate your help.
Looks nice if I can get it to work :-D
I don't know what's happened to the html there, not intentional :-).
But I have tried again, by adding another container - within the container, which works much better. I just get a tiny hairline crack on the edges now.
I'm hoping to avoid doing this with png. SVG is so beautiful.
It looks nice :)
But I would recommend setting the Container which is directly under the Grid with the photo as background, then add another Container in the Grid > Container (has photo as bg), set the SVG as its background image. Both sizes set to cover.
Let me know how that works.
Hi Ying, sorry for delayed response. I have been moving home.
I've got it working. I didn't think of having the two containers set to cover.
Thanks so much for you help.
☺️
Ema
