contain-element/contain-element.js

function ContainElement(options) {
    var scaleFactor = 1,
        element = document.getElementById(options.id),
        elementWidth = options.width || element.offsetWidth,
        elementHeight = options.height || element.offsetHeight,
        valign = options.valign || 'center',
        halign = options.halign || 'center';

    // Apply required attributes to the element and its parents
    element.style.position = 'absolute';
    element.parentElement.style.overflow = 'hidden';
    if (['relative', 'absolute', 'fixed'].indexOf(window.getComputedStyle(element.parentElement, null).getPropertyValue('position')) === -1)
        element.parentElement.style.position = 'relative';

    function updateContain() {
        var parentWidth = element.parentElement.offsetWidth,
            parentHeight = element.parentElement.offsetHeight;

        // Run the scale/position functionality if able to determine the parent element's width and height
        if ((parentWidth) && (parentHeight)) {
            // Calculate the scale factor
            if (parentWidth > ((parentHeight / (elementHeight * scaleFactor)) * (elementWidth * scaleFactor)))
                scaleFactor = (parentWidth / elementWidth);
            else
                scaleFactor = (parentHeight / elementHeight);

            // Scale the element using the scale factor
            element.style.width = (elementWidth * scaleFactor) + 'px';
            element.style.height = (elementHeight * scaleFactor) + 'px';

            // Anchor the element horizontally to the left/center/right
            if (parentWidth < (elementWidth * scaleFactor)) {
                switch(halign) {
                    case 'left':
                        // Anchor horizontally to the left of the parent element
                        element.style.left = 0 + 'px';
                        break;
                    case 'right':
                        // Anchor horizontally to the right of the parent element
                        element.style.left = (0 - ((elementWidth * scaleFactor) - parentWidth)) + 'px';
                        break;
                    default:
                        // Anchor horizontally to the center of the parent element
                        element.style.left = (0 - (((elementWidth * scaleFactor) - parentWidth) / 2)) + 'px';
                }
            } else {
                element.style.left = 0 + 'px';
            }

            // Anchor the element vertically to the top/center/bottom
            if ((elementHeight * scaleFactor) > parentHeight) {
                switch(valign) {
                    case 'top':
                        // Anchor vertically to the top of the parent element
                        element.style.top = 0 + 'px';
                        break;
                    case 'bottom':
                        // Anchor veritcally to the bottom of the parent element
                        element.style.top = (0 - ((elementHeight * scaleFactor) - parentHeight)) + 'px';
                        break;
                    default:
                        // Anchor vertically to the center of the parent element
                        element.style.top = (0 - (((elementHeight * scaleFactor) - parentHeight) / 2)) + 'px';
                }
            } else {
                element.style.top = 0 + 'px';
            }
        } else {
            // Try again in 30ms if the document didn't load enough to determine the parent element's width and height yet
            window.setTimeout(updateContain, 30);
        }
    }

    // Run the function to scale and anchor the element
    updateContain();

    // External scale and anchor update function
    this.update = updateContain;

    // External function to set elementWidth
    this.setWidth = function(newWidth) { elementWidth = newWidth; };

    // External function to set elementHeight
    this.setHeight = function(newHeight) { elementHeight = newHeight; };

    // External function to set valign
    this.setValign = function(newValign) { valign = newValign; };

    // External function to set halign
    this.setHalign = function(newHalign) { halign = newHalign; };

    // External function to return the current elementWidth
    this.getWidth = function() { return elementWidth; };

    // External function to return the current elementHeight
    this.getHeight = function() { return elementHeight; };

    // External function to return the current valign
    this.getValign = function() { return valign; };

    // External function to return the current halign
    this.getHalign = function() { return halign; };

    // External function to return the current scale factor
    this.getScale = function() { return scaleFactor; };
}