I like to have pictures stretch or shrink with browser window.
I mean when the user resize the browser window the picture and the background picture must also resize.
After 2 day searching I give up, and ask here.
I only found a knowlegdebase page from the year 2008, but the example inspector picture is totally different from my FWpro 6.1.2
for example there is no “width can grow checkbox” and when I want to set the width to 100% i get an error that that is not allowed… also I don’t see the “overflow” option
Example of the result I like to have: http://momentum-demo.squarespace.com
The example page you’re showing is using a JavaScript function to resize the image when the browser changes dimensions. There are a couple of Actions at http://actionsforge.com that can manage that trick. As far as the removal of Width Can Grow, it’s been replaced by the Fixed % (set to 100%) option in the Measurements segment of the Inspector.
Walter
On Feb 26, 2014, at 5:17 AM, Joep wrote:
I like to have pictures stretch or shrink with browser window.
I mean when the user resize the browser window the picture and the background picture must also resize.
After 2 day searching I give up, and ask here.
I only found a knowlegdebase page from the year 2008, but the example inspector picture is totally different from my FWpro 6.1.2
for example there is no “width can grow checkbox” and when I want to set the width to 100% i get an error that that is not allowed… also I don’t see the “overflow” option
Example of the result I like to have: http://momentum-demo.squarespace.com
ONE - Here I used a flexible DIV (it automatically resizes to fit the viewport) containing a background image, where the DIV has the extended DIV style ‘background-size: cover’ applied to it (I selected the DIV, hit Cmnd+X, and entered the values). In the inspector palette the background-image of the DIV was centered both horizontally and vertically)
TWO - One other option is to apply a page-action called ‘Background Supersizer’: http://actionsforge.com/actions/view/234-background-supersizer, where you have some extra options regarding a slide slideshow. This only (as you can imagine) can be applied to the page background.
For these two options you will need the images to be the maximum dimensions that most probably will be used (I always go for 1920x1050px).
THREE - For inserted images that need resizing to fit flexible DIV’s, you could apply a style called ‘.flexImage’ to those images. You will have to create this style via the CSS Editor:
.flexImage {
width: auto !important;
height: auto !important;
max-width: 100% !important;
}
Keep in mind that this way only scaling down will preserve image quality.
