• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Stretch an image from center to side of browser.

Community Beginner ,
Jan 16, 2018 Jan 16, 2018

Copy link to clipboard

Copied

Example site: Bicycle Store | WIX

On this template I am wondering how to create images that stretch to the side of the browser from the center in muse. If you scroll down on the example site I am talking about the 'about me' and 'cycle with style' sections. I am trying to do this in a fixed width design so I can use scroll effects. Thanks.

Views

668

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Jan 16, 2018 Jan 16, 2018

If you want to have it soon, use WIX .

Best (and only) way, I'm afraid, if you use fluid width breakpoints like here:  homepage ​

You have to decide wether the scroll motion or the centered behaviour is more important.

Reason: As soon as you set the image to behave "stretched to browser width" , the border of the image isn't centered anymore.

If you want to set the image / the frame with the filled in image to react responsive it bleeds outside the canvas ( using fixed width breakpoint).

Best Regards

...

Votes

Translate

Translate
LEGEND ,
Jan 16, 2018 Jan 16, 2018

Copy link to clipboard

Copied

If I understand correctly, you want an image stretched to browser width on a fixed width page.

Since images can‘t be stretched browser wide (only page wide), you have to choose a different approach:

  • Place a simple rectangle (not the crossed out one!), and stretch it to browser width, using the „Resize“ button in Muse‘s upper control strip.
  • Then click onto “Fill“ in Muse‘s control strip, fill the rectangle with an image, and configure it as you like (position, filling behaviour, …)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 16, 2018 Jan 16, 2018

Copy link to clipboard

Copied

Whenever I choose 'stretch to browser width' it will overtake the rectangle i have next to it with all my text. I can't get ti to behave exactly like the example site when I resize the window. I am probably doing a bad job at explaining what i am trying to do. Hope this helps.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 16, 2018 Jan 16, 2018

Copy link to clipboard

Copied

Don‘t understand, what you mean. Could you give us a screenshot or a link (you can publish a free temporary test site on businessctalyst using the „Publish“ menu top right in Muse’s application window), or a very(!) small .muse file to demonstrate your issue? In the last case, please follow these instructions: https://forums.adobe.com/docs/DOC-8652

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 16, 2018 Jan 16, 2018

Copy link to clipboard

Copied

I am trying to get my pictures to behave exactly like the pictures on the example site. when i click stretch to browser width it stretches the entire picture instead of just stretching it to one side or the other. I will try to get something uploaded soon.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 16, 2018 Jan 16, 2018

Copy link to clipboard

Copied

If you want to have it soon, use WIX .

Best (and only) way, I'm afraid, if you use fluid width breakpoints like here:  homepage ​

You have to decide wether the scroll motion or the centered behaviour is more important.

Reason: As soon as you set the image to behave "stretched to browser width" , the border of the image isn't centered anymore.

If you want to set the image / the frame with the filled in image to react responsive it bleeds outside the canvas ( using fixed width breakpoint).

Best Regards,

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 17, 2018 Jan 17, 2018

Copy link to clipboard

Copied

LATEST

The sample wix site is very poor. Doesn’t work properly on mobike devices, doesn’t show up on iPads.

Additionally it works with tons of breakpoints, making the page display very jumpy.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines