Have Image Scale Proportionally When Browser Resized?

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
Argent Arts
 
 
Posts: 13
Joined: Thu May 17, 2018 4:38 pm

Have Image Scale Proportionally When Browser Resized?

Post by Argent Arts » Mon Jun 24, 2019 10:54 am

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. :)

User avatar
Pablo
 
Posts: 17644
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Have Image Scale Proportionally When Browser Resized?

Post by Pablo » Mon Jun 24, 2019 11:12 am

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
 
 
Posts: 13
Joined: Thu May 17, 2018 4:38 pm

Re: Have Image Scale Proportionally When Browser Resized?

Post by Argent Arts » Mon Jun 24, 2019 11:30 am

Thank you very much. Option 2 looks promising. :)

Argent Arts
 
 
Posts: 13
Joined: Thu May 17, 2018 4:38 pm

Re: Have Image Scale Proportionally When Browser Resized?

Post by Argent Arts » Mon Jun 24, 2019 12:02 pm

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. :(

User avatar
Pablo
 
Posts: 17644
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Have Image Scale Proportionally When Browser Resized?

Post by Pablo » Mon Jun 24, 2019 12:14 pm

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.

Post Reply