I'm confused about how to size images so that they fill the container they are in. For instance, in the screen shot below, I'd like to scale/crop the image so that it fills entire column width and is the same height as the text in the column next to it. Depending on the screen the website is being viewed on, I'd imagine the dimensions of the photo would need to change so that it remains the appropriate height.
You could accomplish that by setting the image as a column background instead of using an image element. Once the left column has the background image set, edit the parent row of those 3 columns and ensure that the "Equal Height Columns" option is enabled.
In mobile views, the column height will go back to auto (which is 0), so in order to ensure the image remains visible on mobile, you can also place a "divider" page builder element into that column that has the BG image. The height which you set for the divider will then be how tall the image column displays on mobile.
Thanks so much! This does work to a certain extent – the picture does fill the container – but how do I get the photo to be appropriately sized within the container? In the example below, it is zoomed into just the very top most corner of the image. Is there a way to know what dimensions/resolution would be the right size for this specific container so that I can crop and center my photo in exactly the way I'd like (other than a very time consuming trial and error process?).
Can you ensure that the column option "Scale Background Image To Column" is enabled? if so, kindly share the page URL so that I can take a closer look to assist
Hello!
I'm confused about how to size images so that they fill the container they are in. For instance, in the screen shot below, I'd like to scale/crop the image so that it fills entire column width and is the same height as the text in the column next to it. Depending on the screen the website is being viewed on, I'd imagine the dimensions of the photo would need to change so that it remains the appropriate height.
Do you have any advice on how to achieve that?
Thanks,
Liza
Hey Liza!
You could accomplish that by setting the image as a column background instead of using an image element. Once the left column has the background image set, edit the parent row of those 3 columns and ensure that the "Equal Height Columns" option is enabled.
In mobile views, the column height will go back to auto (which is 0), so in order to ensure the image remains visible on mobile, you can also place a "divider" page builder element into that column that has the BG image. The height which you set for the divider will then be how tall the image column displays on mobile.
Cheers
Hello!
Thanks so much! This does work to a certain extent – the picture does fill the container – but how do I get the photo to be appropriately sized within the container? In the example below, it is zoomed into just the very top most corner of the image. Is there a way to know what dimensions/resolution would be the right size for this specific container so that I can crop and center my photo in exactly the way I'd like (other than a very time consuming trial and error process?).
Thanks!
Liza
Hey Liza,
Can you ensure that the column option "Scale Background Image To Column" is enabled? if so, kindly share the page URL so that I can take a closer look to assist
Thanks,
Oops! Somehow I completely miss those options before. That worked perfectly! Thank you.
Hello! Just wondering if anyone has had a chance to look at the issues I describe below?