Scaling an inline image from the absolute center of its parent?

Question

I know this is another centering question but I think this is different to any of the others on StackOverflow. Before anyone says it yes I have searched for a solution but found nothing.

To get my point across better I've mocked up an image to give you an idea of what I would like my image to do: http://cl.ly/1q143w1P2p19322s2L0s

The problem

I have a fluid, full browser width layout. For this question and to explain it better my image is set at 400% width (height calculated automatically to maintain its aspect ratio). So therefore the image will fill the entire screen (and more). Every method I have tried makes the image scale from the top left of the parent/wrapper of the container so the top left hand side of the image is always in view but I don't want this to happen.

Instead, I want the exact center of my image to always be on view when you resize the browser. No matter the height or width of the browser window.

I hope that all makes sense, its quite hard to explain. I've tried pure CSS solutions so far but no luck so far. Can jQuery help me?

--

I have tried this technique (http://css-tricks.com/centering-in-the-unknown/) but the image scales from the top left of the image, which isn't what I want.

Answer 1

If all you are trying to achieve is keeping the centre of an image in a constant position, then you just need to adjust the top and left properties of the image, so that the centre of the image lies in the middle of the surrounding frame.

The calculation is simply finding the midpoint of your frame, which is half way along it, and subtracting half the width of the image to find your left position, the same with heights for the top position.

I have made you a demonstration program to show you, change the widths in the box, maximum of 500, and you will see the image stays centred.

Demo: http://jsfiddle.net/Orbling/ZZrjP/

Centred Image - 200x200

Centred Image - 400x400

I am using the #outer-frame to represent your window, or outer div of your website, the #image-frame is whatever size you want the image to appear at. If you want your image to occupy the full window, dispense with the concept of the outer frame and use the window as your image frame.

HTML:

<div id="outer-frame">
    <div id="image-frame">
        <img src="http://fc01.deviantart.net/fs50/f/2009/317/f/4/Colour_Spiral_by_Deatant2.jpg" alt="Spiral by Deatant2" width="1280" height="736" />
    </div>
</div>
<div id="controls">
    Width: <input type="text" id="iwidth" name="iwidth" value="200" />
    Height: <input type="text" id="iheight" name="iheight" value="200" />
</div>

CSS:

#outer-frame { width: 500px; height: 500px; margin: 10px; border: 1px dashed black; }
#image-frame { width: 200px; height: 200px; overflow: hidden; position: relative; }
#image-frame img { position: relative; }
#controls { margin: 10px 10px 0 10px; }
#controls input { width: 80px; }

Note the position: relative;​ directives, these ensure the positions are relative to the container, if they were relative to the page, the calculations would need to be offset.

jQuery:

$('#image-frame').bind('reposition-image', function() {
    var imageFrame = $(this);
    var outerFrame = $('#outer-frame');
    var image = imageFrame.find('img');

    var frameWidth = imageFrame.width();
    var frameHeight = imageFrame.height();

    // center image frame
    imageFrame.css({ left: (outerFrame.width() / 2) - (imageFrame.width() / 2),
                     top:  (outerFrame.height() / 2) - (imageFrame.height() /2)});

    // position image in frame
    image.css({ left: (imageFrame.width() / 2) - (image.attr('width') / 2),
                top: (imageFrame.height() / 2) - (image.attr('height') / 2)});
}).trigger('reposition-image');

$('#controls input').change(function() {
    var jThis = $(this);
    var cDim = jThis.attr('id').replace(/^i/, '');

    var nSize = parseInt(jThis.val());

    if (!isNaN(nSize) && nSize != 0) {
        var outerFrame = $('#outer-frame');
        nSize = (nSize > outerFrame[cDim]() ? outerFrame[cDim]() : nSize);        
        $('#image-frame')[cDim](nSize).trigger('reposition-image');
    }
});
​