Deff, вот как то так=)
<!DOCTYPE HTML>
<html>
<head>
<style>
#wrapper {
position:absolute;
margin:40px;
overflow:hidden;
width:500px;
height:500px;
}
#wrapper img {
width:500px;
height:500px;
}
</style>
</head>
<body>
<div id='wrapper' class='wrapper'>
<img id="myPic"
src="http://worldoftanks.ru/dcont/fb/media/t110e5_april2012_clear/t110e5_ru_1680_1050.jpg"
lang="500"
style="position: absolute; left: 0; top: 0;"
onmousedown="myFunc ()">
<!-- атрибут lang="ширина картинки в пикселях" (она же - высота) -->
</div>
<script>
function myFunc (){
var obj = document.getElementById ('myPic');
if (obj.lang < 2500){
var width = obj.offsetWidth * 1.1;
var left = (width - 500) / 2 ;
obj.lang = width;
obj.style.height = width + 'px'
obj.style.width = width + 'px';
obj.style.left = -left + 'px';
obj.style.top = -left + 'px';
}
}
</script>
</body>
</html>