Have Image Scale Proportionally When Browser Resized?

[Argent Arts]

Hello.

I want to have an image that scales 100% horizontally and will scale proportionally when the browser is resized. As an example, if an image were 1000px (width) by 500px (height), the width set to scale 100% - if the browser were resized to 500px width, the height of the image would be 250px (because when the width was reduced, the height was reduced equally). I seem to only be able to get an image to either stretch one way or the other (either only height or width) or it stretches out of proportion (as when filling the entire browser window side to side and top to bottom). I want the image to stretch 100% side to side, but it does not need to fill the entire browser top to bottom (unless the image is taller than the browser is).

My plan is to have three images arranged in rows - one on top, one in the middle, and one at the bottom. The images need to stretch from side to side (100% width) but remain proportional if the browser is resized.

Is this possible in Web Builder? If so, how could I do this?

Thanks in advance.

[Pablo]

Here are 3 options:
1- add a breakpoint and resize the image in the breakpoint
or
2. Use a layout grid and set the 'full width' property of the image to 'true'.
or
3. Add the image as background of a layer/layout grid or other container. Then you can use 'cover', 'contain' or any other the other background size options.

[Argent Arts]

Thank you very much. Option 2 looks promising.

[Argent Arts]

3. Add the image as background of a layer/layout grid or other container. Then you can use 'cover', 'contain' or any other the other background size options.

If I use a layer and add an image as a background, then the image does indeed resize proportionally, but the layer does not. Even if you check both Relative Horizontal Sizing and Relative Vertical Sizing, the layer does not resize proportionally. The end result is you can resize the browser so that portions of the bottom of the image are cut off.

Using a layout grid looked optimal and was giving me the results I wanted with the image, but I found that I could not layer another, smaller image on top of that, if I needed to.

[Pablo]

If I use a layer and add an image as a background, then the image does indeed resize proportionally, but the layer does not.

Correct, because a layer is fixed/absolute container.
A layout grid is a flexible container.

Using a layout grid looked optimal and was giving me the results I wanted with the image, but I found that I could not layer another, smaller image on top of that, if I needed to.

Correct, flexible elements cannot be layered.