Scale images when clicked to full screen

There is a container consisting of several images, when you click on an image, it should smoothly zoom (sclale) to the full width of the container, pushing all other images as they expand. How to make the image fill the full width of the container after zooming and is centered?

var current = {
        x: 0,
        y: 0,
        zoom: 1
    },
    con = document.getElementById('container');

con.onclick = function(e) {
    var coef = e.shiftKey || e.ctrlKey ? 0.5 : 3,
        nz = current.zoom * coef;
    con.style.transform = 'translate(' + '-50%, ' + '-50%) ' +
        'scale(' + nz + ')';
};

html, body {
    margin: 0;
    padding: 0;
}

#container {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: 0 0 0;
    transition: transform 0.3s;
    transition-timing-function: ease-in-out;
    transform: translate(0,0) scale(1);
    background: #000;
}

.item {
    position: absolute;
}

img {
    width: 50%;
    height: 50%;
}

<div id="container">
    <div class="item">
        <img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" />
        <img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" />
    </div>
</div>