Cómo hacer que los elementos de la imagen se escalen con la ventana en lugar de reposicionar

Tengo un proyecto, donde tengo 4 imágenes juntas en el medio de la ventana, dispuestas así:

12 34 

Quiero que las imágenes escalen hacia arriba y hacia abajo con la ventana, pero mantengan su posición.

En este momento, los tengo a todos en un div llamado Centro:

 

con este CSS:

 #centerArrows { margin-top: auto; margin-left: auto; margin-right: auto; margin-bottom: auto; position: relative; z-index: 0; width: auto; } img { width: auto; max-width: 100%; max-height: 100%; } 

¿Alguna idea de lo que estoy haciendo mal?

Mira este violín

http://jsfiddle.net/LDt8P/

 html , body , #centerArrows{ display:table; width:100%; height:100%; } #centerArrows{ display:table-cell; text-align:center; vertical-align:middle; } 

Violín en respuesta al comentario para evitar que la imagen se extienda a 4 líneas:

http://jsfiddle.net/LDt8P/1/


Solución con JQuery para hacer que la imagen sea más pequeña y que se ajuste al ancho de la ventana cuando el ancho de la ventana es más pequeño que un ancho específico:

http://jsfiddle.net/LDt8P/3/

 var initialWidth = $(window).width(); $(window).resize(function(){ $('img').each(function(){ var img = $(this), pos = img.data('pos') || $(this).offset(), imgWidth = img.data('width') || img.width(), ratio = $(window).width() / initialWidth, newImgWidth = imgWidth * ratio, newImgLeft = pos * ratio; img.css({ width: newImgWidth + 'px', left: newImgLeft + 'px' }); }); }).resize(); 

Aquí hay una implementación simple de jQuery. En este caso, debe usar position: fixed o position: absolute (en este caso, los elementos relativos parent deberían ser el cuerpo.

El código no ha sido probado … (lo siento, realmente no tengo tiempo ahora)