Unable to fit image to page width

[rongreen]

I have an image on the contact page that I want to fill the full width but stops short. What am I missing or not doing? I have tried various image sizes at different resolutions to no avail. The image is within LayoutGrid7. Any help would be greatly appreciated.


https://www.greensphotoimages.com/alljo ... _help8.zip

[crispy68]

Set it to cover.

[rongreen]

I changed it to "cover", but no change.

[crispy68]

You didn't say how you inserted the image. Did you drag into the grid or set it as the background? If you set it as the background then cover will work.

[rongreen]

I did drag it into the container. How do you set it as the background?

[crispy68]

Layout grid bsckground style properties

[rongreen]

Thank you!

[rongreen]

I followed your recommendation and it now fills the space, but the grid clips the image on both the top and bottom. I grab the handles to drag down and expand the grid but it does not let me adjust it. For the Grid System, I tried css grid, flexbox, and default with no change. Layout is set to fluid, overflow to hidden, layout to fluid, coulum height to auto, and position to floating. What can I do to adjust the height of the Layoutgrid so it displays the whole image? Thanks in advance for your response.

[crispy68]

Using cover ensures that the image always fills the container. However it may crop the image vertically to do so. You could add some top/bottom padding to the grid to make it taller. Keep in mind your image size/dimensions and aspect ratio will play a part in what you will see.

[rongreen]

Great input! Thank you!!

[rongreen]

One last question if you don’t mind? Is there a certain aspect ratio guideline or expectation when using FlexGrids? I am a retired photographer and work in Photoshop extensively so I am familiar with paying attention to that image spec, but didn’t think of it relative to a FlexGrid thinking it would expand with the image design?

[wwonderfull]

While FlexGrids can adjust to various image sizes, maintaining a consistent aspect ratio across your images ensures a cohesive look. If your images vary too much in size and shape, it can disrupt the visual flow of your layout.

A common guideline is to use a standard aspect ratio, like 16:9 or 4:3, which works well for most designs. This way, your images will fit nicely within the grid without causing awkward spacing or misalignment.

[Pablo]

Is there a certain aspect ratio guideline or expectation when using FlexGrids?

Your question isn't directly related to FlexGrid itself, but rather to how you've defined your layout and how the page sizes dynamically.

If you're using a standard image within the grid, it will retain its original aspect ratio.

If you set the image as a background, then the grid cell's content will determine the image's size, which may affect its aspect ratio depending on how the content scales.

[rongreen]

Thanks for the inputs. I would appreciate further clarification? From the standpoint of WYSIWYG and its response to image placement (ignoring good appearance practices), what constitutes a “standard image”? Is it defined by certain typical parameters such as a certain aspect ratio (e.g. 16:9, 4:3, etc.) or ppi (e.g. 100, 150, etc.), or…?

[Pablo]

By 'standard image', I meant the 'Image' object (not image background).

[rongreen]

I just figured out the answer to my original issue with the image not expanding to fit the width? I had a gutter size of 15 set for the outside and inside grid. When I removed them the image filled the Grid container.

[wwonderfull]

I just figured out the answer to my original issue with the image not expanding to fit the width? I had a gutter size of 15 set for the outside and inside grid. When I removed them the image filled the Grid container.

Correct.. gutter width works as padding because now a days some high-end smartphones have curved displays on the sides, so it is a good practice to have some padding on both sides. But if you had set the image as the background of the grid that the even with the gutter-width there would not be any issue. The gutter-width takes effect on you place the image on the grid to be contained as an object.