Image ShrinkyDink

Expandable image and shrinkable with no min-width

by Reusablecode

CSS

html, body {
    height: 100%;
    position: relative;
    background: url(http://img810.imageshack.us/img810/386/02265wintersun800x480.jpg);
    background-repeat: no-repeat;
    -o-background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;
}

div {
    position: absolute;
    border: solid 1px rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
}

JavaScript

var cracker, drag;

Element.implement({
    fadeoff: function() {
        new Fx.Tween(this, {
            onComplete: function() {
                this.destroy();
            }.bind(this)
        }).start('opacity', 0);
    }
});

document.body.addEvents({
    mousedown: function(e) {
        cracker = new Element('div', {
            styles: {
                top: e.client.y,
                left: e.client.x
            }
        }).inject(document.body);

        cracker.store('initial:pos', {
            top: e.client.y,
            left: e.client.x
        });

        drag = true;
    },

    mouseup: function() {
        cracker.fadeoff();
        drag = false;
    },

    mousemove: function(e) {
        if (cracker && drag) {
            var p = cracker.retrieve('initial:pos');
            cracker.set('styles', {
                height: e.client.y - p.top,
                width: e.client.x - p.left
            });
        }
    }});
});