Hi everyone,
I’m new to Anvil but I really enjoy it!
I’m trying to resize the image on my page based on the browser window.
I mean, I expect it to resize along the other element on the page.
So far, I tried to put the image inside a column panel and inside a flow panel.
No success for the moment.
Can someone help me out?
Kindly, Vincent!
Hi @Vincent and welcome to the forum.
Have you tried all the available display_mode options for the image component?
I would have thought one of those would fit to the container width.
The way I read the display_mode docs, display_mode has to do with the relationship between the size of the image (bitmap) and the size of the image component that displays it.
I think Vincent is talking about the relationship between the size of the component and the size of its container.
sc549, p.colbert thanks for the fast replies!
@stucork, I indeed tried the display_mode property. It does not reshape the image if the browser window gets resize.
@p.colbert, you read that right, I’m interested in the relationship between the image and the container! I can’t find any other property to try.
Another thing that might be linked, I can’t seem to upload SVG image. Maybe the PNG can’t be resize?
Thanks for your time guys!
So, I’m feeling like CSS might be the way here!
How could I hit the image properties within the “Assets/Theme.css” ?
I can’t find the good tags.
Thanks!
Hi @Vincent,
If you set the wrap_on property of your ColumnPanel to never, this will prevent your Columns from wrapping on smaller screens:
This will preserver your layout, and resize the content inside your ColumnPanel as the browser window changes. Here’s a simple clone link - is this what you were looking for?
https://anvil.works/build#clone:VKCXASCDNT2VL3SA=QSC5UYEOMRDDUGLTI53JG2UU
Yess, Bridget!!
That is it!!! Thank you very much!
I am still interested in changing the CSS with the “theme.css” file.
How can one access drag and drop component with CSS?
Thanks very much for your time! 
You’ll want to check the documentation roles which describes anvils way of adjusting css for specific components.
Then a bit of looking at theme.css to work out some of the nuances about how to target the part of the element you want as well as a good deal of using your browser development tool to inspect the elements themselves.
Thanks very much sc549!!
I will indeed take a look at it!
Thank you everyone for your time!
I really appreciate it!
