« 
 »
08 05 2008

Background fitting the browser and image ratio

Posted by: Romuald in experiments, tags: , , , , ,

Here is an example to show a element like a background, a image in a portfolio or whatever and make it fitting the browser.

In the demo you can choose three modes.

Mode Fit

The picture is fitting the browser regardless the original ratio. The formula is simple:

imagePositionX = 0
imagePositionY = 0
imageWidth = stageWidth
imageHeight = stageHeight

Mode Out (I called it like that because you’ll miss a part of the picture)

The picture is fitting the browser as well but we keep the ratio, we’ll miss a part of the picture at the right or the bottom in my example.

ratio = initialImageWidth / initialImageHeight
newWidth = stageWidth
newHeight = stageHeight
if (stageWidth / ratio < stageHeight) newWidth = stageHeight * ratio;
else newHeight = stageWidth / ratio;
imagePositionX = 0
imagePositionY = 0
imageWidth = newWidth
imageHeight = newHeight

Mode In

The image is fitting the browser, we also keep the ratio but we show the whole picture, we’ll have a gap around depending of the size of the area.

ratio = initialImageWidth / initialImageHeight
newWidth = stageWidth
newHeight = stageHeight
if (stageWidth / ratio > stageHeight) newWidth = stageHeight * ratio
else newHeight = stageWidth / ratio
imageWidth = newWidth
imageHeight = newHeight
imagePositionX = (stageWidth * .5) - (imageWidth * .5)
imagePositionY = (stageHeight * .5) - (imageHeight * .5)

You can see a demo and download the source.


Vote in HexoSearch

This entry was posted on Thursday, May 8th, 2008 at 10:02 pm and is filed under experiments. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Background fitting the browser and image ratio”
  1. Jay says:

    July 30th, 2008 at 3:29 pm

    Exactly what I am looking for, thank you. Hey is the demo fla you have saved in CS3, I’m not able to open it at work on Flash 8.

  2. Romuald says:

    July 30th, 2008 at 4:30 pm

    The BaseUI library and this demo had been written in AS3, you can’t make AS3 from flash 8. The code is all in the as class in the zip file (Ratio1.as), in the FLA there are only the background and some assets you see on the screen for the demo.

    This is a general concept, I’m sure you can write it in AS2.

    In AS2, you have to create a listener:
    var ctListener:Object = {};
    Stage.addListener(ctListener);
    ctListener.onResize = Delegate.create(this, updateFunction);

    And in the updateFunction, you apply those rules on your background.

Leave a Reply