How to keep an image centered

[frank.t...@gmail.com]

The designer allows one to set the page to 100% which nicely resizes the page upon a browser window resize event. It also lows one to set the size (width and height) of an image to 100%, which however is not always what one desires because of aspect ratio violation (should the user resize the browser window in that way).

What I am seeking for is a possibility to change the properties of an image such that

a) the original aspect ratio of the image is kept, and
b) the image stays centered in the browser window (or centered to the page)

Mathematically I'd like to set the image width to (50%-width_of_image/2) but that is not supported.

How can this quite common task be accomplished?

I am using Google Web Designer Beta 1.3.2.0521

Thanks,
Frank

[Matt Phillips]

Keep a couple things in mind here. One is that when you add an image to GWD on the stage, it gets positioned as absolute, so you'll need to override that if you're looking to have it reposition dynamically. To center the image horizontally to the page, use margin: 0, auto; as a CSS rule to automatically center it. If you're looking to scale the image as the page scales, you'll likely have to apply width: x% and height: auto. This will keep the width at a % of the page (or parent element), and auto height will maintain the aspect ratio. I'm not sure how tolerant GWD is of non-pixel sizes for elements though, so you may need to look to another framework if that causes you issues

    -Matt-