Hive de Imagem responsivo - CSS / JQuery

Eu segui este tutorial (http://mattbango.com/notebook/code/hover-zoom-effect-with-jquery-and-css/) e construímos um plugin de imagem flutuante que gostaria de usar em meu site.

O único problema que tenho é que eu quero que ele funcione de forma responsável, dimensionando as imagens de acordo com o meu 960gs.

Aqui está o violino que eu tenho até agora:http://jsfiddle.net/Ak94R/6/

.viewport {
    float: left;
    height: 360px;
    margin: 0 9px 9px 0;
    overflow: hidden;
    position: relative;
    width: 360px;

}

Em vez de diminuir essa imagem de 730px / 730px para 360px / 360px, quero reduzi-la de 200% para 100%. Eu também preciso que o div principal (.viewport) seja dimensionado em 100%. Qualquer ajuda seria muito apreciada!

questionAnswers(2)

yourAnswerToTheQuestion