Unable to fit image to page width

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
rongreen
 
 
Posts: 93
Joined: Thu Jun 06, 2024 4:36 pm

Unable to fit image to page width

Post by 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
User avatar
crispy68
 
 
Posts: 2907
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Unable to fit image to page width

Post by crispy68 »

Set it to cover.
rongreen
 
 
Posts: 93
Joined: Thu Jun 06, 2024 4:36 pm

Re: Unable to fit image to page width

Post by rongreen »

I changed it to "cover", but no change.
User avatar
crispy68
 
 
Posts: 2907
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Unable to fit image to page width

Post by 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
 
 
Posts: 93
Joined: Thu Jun 06, 2024 4:36 pm

Re: Unable to fit image to page width

Post by rongreen »

I did drag it into the container. How do you set it as the background?
User avatar
crispy68
 
 
Posts: 2907
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Unable to fit image to page width

Post by crispy68 »

Layout grid bsckground style properties
rongreen
 
 
Posts: 93
Joined: Thu Jun 06, 2024 4:36 pm

Re: Unable to fit image to page width

Post by rongreen »

Thank you!
rongreen
 
 
Posts: 93
Joined: Thu Jun 06, 2024 4:36 pm

Re: Unable to fit image to page width

Post by 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.
User avatar
crispy68
 
 
Posts: 2907
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Unable to fit image to page width

Post by 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
 
 
Posts: 93
Joined: Thu Jun 06, 2024 4:36 pm

Re: Unable to fit image to page width

Post by rongreen »

Great input! Thank you!!
rongreen
 
 
Posts: 93
Joined: Thu Jun 06, 2024 4:36 pm

Re: Unable to fit image to page width

Post by 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
 
 
Posts: 1433
Joined: Fri Aug 21, 2020 8:27 am
Contact:

Re: Unable to fit image to page width

Post by 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.
User avatar
Pablo
 
Posts: 22426
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Unable to fit image to page width

Post by 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
 
 
Posts: 93
Joined: Thu Jun 06, 2024 4:36 pm

Re: Unable to fit image to page width

Post by 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…?
User avatar
Pablo
 
Posts: 22426
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Unable to fit image to page width

Post by Pablo »

By 'standard image', I meant the 'Image' object (not image background).
rongreen
 
 
Posts: 93
Joined: Thu Jun 06, 2024 4:36 pm

Re: Unable to fit image to page width

Post by 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
 
 
Posts: 1433
Joined: Fri Aug 21, 2020 8:27 am
Contact:

Re: Unable to fit image to page width

Post by wwonderfull »

rongreen wrote: Sun Oct 13, 2024 10:52 pm 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.
Post Reply