How do I make Picture Responsive like in the attached video?

[timothyp96056021]

Hi all,

Please look at this attached video. I haven't figured out how to make a picture responsive like this. Does anyone have a solution?

Thanks!

[Nancy OShea]

Try this video.

Adobe Muse 2016 Tutorial | Responsive Images vs Fills - YouTube

[timothyp96056021]

The video was a helpful in showing a different way of creating an image in the site. Thank you. However, I am still having the same problem. When I shrink the browser's width, it creates this white space, when the image should still hit the bottom of the page and not condense its height like it's been doing. How do I fix this?

[Nancy OShea]

Are you using Responsive  Place (foreground image) or Fill (background image)?

Your example video appears to be using a background image (fill) because there is noticeable clipping when the image is down scaled.

[timothyp96056021]

I have tried both and they both leave the white space at the bottom. The picture I put in my last response was using fill.

[Nancy OShea]

Do you have a sticky footer?

Can you post a URL to your problem page?

[Günter Heißenbüttel]

Don‘t use an image frame (=„rectangle frame tool“), but a simple rectangle (=„rectangle tool“), fill it with an image by using the „Fill“ command in Muse‘s upper control strip and set the rectangle to „Responsive Width“ (not „Responsive Width and Height“). Then all should work as expected.

I described the difference between “rectangle tool“ and „rectangle frame tool“ here: https://forums.adobe.com/thread/2211736

[timothyp96056021]

I do have a sticky footer. I have put it at responsive width only and I am still left with the white space like before. I am also only using the rectangle tool, not frame. I've seen some posts talk about Muse not allowing full height capacity - wondering if this is the problem?

[Nancy OShea]

I'm not a big fan of sticky footers that rely on hacks which Muse does because it's not capable of supporting flexbox.  But that's another topic. 

Try it without the sticky footer and see what happens.

[timothyp96056021]

Turning off sticky footer doesn't help

[Günter Heißenbüttel]

Then give us a link to a sample .muse file (Dropbox), which demonstrates your issue. I think, you are mixing up differnt issues. The blank space isn‘t necessarily related to you “image scaling problem“.

[timothyp96056021]

Here it is. Thank you!

Dropbox - Cornerstone Scaling Issue.muse

[Günter Heißenbüttel · Accepted solution]

Muse does exactly, what you tell it to do!

As already explained in your other thread (https://forums.adobe.com/thread/2522301), you pinned the menu elements to the bottom of the browser window – and just that happens! The blank space isn’t caused by the image, but by the height of your browser window. Use the „Footer“ option instead to correct this. Here a modified .muse file: https://www.dropbox.com/s/kxmfla1tolm1jhm/Cornerstone%20Scaling%20Issue_Mod.muse?dl=0