Picture In Layout Grid Does Not Scale

[Ghardin]

I have a jpg picture in a layout grid at the top of page. When I set image properties to Contain, the picture scales nicely to 400, but at higher screen resolutions bars appear on either side of jpg. If I set image properties to Cover, the jpg stretches to the sides of larger screens, but does not scale properly to 400 or below and content below picture drops down low in the screen. Have tried placing the image as background for page, that does not work either. I have tried using pictures with different widths in different breakpoints, have had little luck with that and it was a nightmare trying to keep each page formatted correctly. Project files can be found here https://drive.google.com/drive/folders/ ... sp=sharing

[Pablo]

Nothing is broken here—this is expected behavior. The issue comes from how aspect ratios work: your image has a fixed aspect ratio, while the grid/container it sits in can change shape depending on the screen size. Because of this mismatch, the image will never perfectly fill the container in all situations.

This isn’t something specific to WWB—it’s just how HTML/CSS handles images and backgrounds.
Contain makes sure the entire image is visible, but may leave empty space (bars) if the container’s aspect ratio doesn’t match.
Cover fills the container completely, but parts of the image may be cropped.

If your goal is for the image to always keep its aspect ratio without distortion, the best approach is to use it as a regular image element (not a background) and let it scale naturally.

[Ghardin]

By keeping it as a regular image element, does that mean I can still insert the image in a flexbox container? Can I use a wider image for wider screens and a different narrower image for smaller screens, hiding each image in different breakpoints?

[Pablo]

Yes, you can use images inside a flex container.
Yes, you can use breakpoints to show / hide images for different screen sizes.