I have the following problem. Attached is an image of the website layout. On the left side, the menu and the name above have a fixed position. They stay at their position no matter how big the browser window is. The image next to it also has a fixed position on the X and Y axis at the left and the top. However, the image scales up in width and height Proportional as I make the browser window wider. Now here’s my problem: I want the image to also respond proportional to the height of the browser window. How can I achieve that? So far, I have only managed to make the image behave responsively either in width or in height - not both at once. How can I implement it so that it works with the design of the page?
Go to advanced sizing options by pressing the Alt+I shortcut. Set the height in vh and width in vw. VH is viewport height 100 vh means the image will cover the entire height of the device; in your case, it should be around 60-70 vh. Same goes for the vw, you can set 100vw to cover the entire screen width. In your image, it should be around 50- 60vw.
If I go to the image and change the reponsive properties from Proportional to Adjust frame in the menu, now I can change the two values - it then behaves responsively in both height and width, but the image does not remain in the fixed position.
To keep the position fixed, Use the margin or alignment. If you want to stick the image to a side then use the alignment; if you want it in the very center, use the center alignment. If you want to add some pace from the edge, add a margin. The alignment is on top of inspector panel.
Adding a margin will make sure your image keeps the distance constant. You can use either pixel scale or simple pixel option for your margin.
FYI, there is another easy way to activate what you want. Choose stretch-responsive behavior(in basic scaling options) or set the width and height to 100%, after that, add padding to your cell/container/section. It will give you the same effect.
I’m afraid it’s not quite what I’m looking for.
Under the following link you will find a photo artist who has made his site with Wixstudio - it works exactly as I would like it to work. He only has small adjustments to the breakpoints. Maybe you can have a look at it.
Let’s say I only have one element on the whole page. It’s an image. The image should always be in the top left corner, no matter how big the browser window is. Let’s stick to the desktop size and ignore the other breakpoints. The image should always be in the top left corner. Let’s also imagine that the image is rectangular and has the following dimensions: 200 wide by 100 high.
We are on a desktop width of 1001 PIXEL.
When we preview it, the image should be in the top left corner and get bigger proportionally when we drag the browser wider. However, it only enlarges as far as the height of the browser.
I can make the image proportionally bigger by widening the browser. However, the height of the browser does not affect the size. But I would like that. I did this by going to the image menu and setting it to Maintain image ratio. Then I activate the Responsive Proportional checkbox in the Inspector on the right. I then set the margins to ‘Pixel’ and enter 0 at the bottom. Everything works the way I want it to in the preview, except that unfortunately the height of the browser window has no influence on the proportional enlargement/reduction.
