www.wysiwygwebbuilder.com

Hello,

I have well progressed with my website but I still struggle to understand how to display pictures with the exact same size. I am using a layout grid that I have organized in multiple columns. I then import pictures from .JPG files that have the same size when dropped in the page. I used the "contain" option in the fit option, also played with the width parameter (all equal for the 4 pictures), but nothing helps, the pictures are of uneven sizes (see the screenshot https://ibb.co/bK5wm9F).

I have tried to import the original files in a PPT and then crop and resize them exactly, then individually save them in .JPG before dropping them in the grid, it doesn't help, always the same issue.

Just to understand: when I select the picture once in the grid, I can see handles. If I drag the lower one down, I can see the expansion of the grid, kind of inserting margin but I see no effect when previewing the site. Then if I activate the crop button, I see another set of handles and I can move the window around or select a part of the image. But then, how to confirm the crop action? Finally, I've tried to play with the picture dimensions in the property tab but no effect.

I've read the WYSIWYG tutorials about pictures and images management, but I can't figure out the proper procedure to have the exact same size in the end. What am I missing here? Thank you.

The image you shared on the link does not exist. Make sure to is accessible.

By default, images with the same aspect ratios will be displayed the same size. But you may have added padding or margins.

If need help with this then please share a demo project so we can see all your settings.

I have uploaded the reduced project in this temp folder: https://powersimtof.com/temp/

The two left-side pictures look alike in F5 but the other two in the right side don't. As I mentioned, I do not see the effects of the handles - I can nicely move them but see no change on the pictures - and I can't manage to resize or crop these pictures for the best possible fit. If you have a suggestion, I will try it, thank you.

The height is auto adjusted based on the width. So if the image is 2 centimeters smaller in height it can't just create because it is bound to the width. If you used nested grids, then inside those grids you could have stretched the images in both height and width but as you are not doing nested and putting the images directly inside the grid 4 grids it is being done in responsive manure which is the normal way it would act for any image element it has the way as it is doing.

So better solution is not using more css which we already have but use any image editor for example Inkscape or GIMP and just scale all the images correctly then bring it, without any extra code it will be precise in height and much responsive scaling. So more than css solution I would advise precise tailoring of the image.

Thank you wwonderfull, I have downloaded GIMP and I could modify the existing ratios by unlocking the aspect ratio in the Image/scaling sub-menu. Once done, I have created a blank project, did include a grid and dropped all the images in their location, perfect preview!

Now, if I take the exact same files (having identical dimensions then) and bring them to my on-going project, the size is different in preview

Even if I copy/paste the grid from the test page into my new on-going project, the size are still different. Something to do with properties of the page perhaps. I will further dig.

If need help with this then please share a demo project so we can see all your settings.

Thank you Pablo, I did solve it by updating the layout grid with a new one and it is good looking now. I have seen this question often coming up in threads and perhaps a quick tutorial showing how dropping pictures in the layout grid - even if they look alike on the page - end up with different sizes in preview. Showing how to resize them with GIMP for instance, could be an interesting topic. Just a suggestion : )

I think your layout grid had some kind of padding or other spacing on one of the columns so therefor the image had a different width.
But it is difficult to help you with these kinds of things if I cannot see what you have done, because the sofwtar has thousands of options and millions of possible combinations...