Escalado de imágenes

Hola, estoy haciendo una web para un fotógrafo, y quiere poner una foto en la portada que se adapte a la resolución del cliente siempre. Bueno como no me gusta complicarme decidí que lo sencillo es lo mejor, así que coji una imagen grande y la puse en la web con los atributos width y height en 100%. Esto funciona correctamente en firefox, explorer y opera, pero en Chrome y Safari cambia las proporciones, haciendo que la imagen ocupe la altura total del navegador, con lo que queda deformada.

Esto podeis verlo en http://alfredo.ainvar.net

Alguien me puede dar una solución sencilla. Muchas gracias de antemano.

Al <div id="contenr"> dale un height: 50%;
El problema es que webkit entiende que el 100% del <img> debe ser el mismo height del contenedor, no de la imagen en sí.

Otra cosa que puedes probar para que se mantenga la relación de aspecto de la imagen es probar usando object-fit: contain; en tu CSS para el tag <img>.

O bién, en vez de usar un <img> para mostrar la imagen, poner la imagen como background del contenedor.

y si no le pones el height?

Muchas gracias a los dos por responder. Silvestre, eres un genio, efectivamente, sin poner el height queda perfecto en Chrome y Safari también.

Un saludo y gracias de nuevo, estoy anonadado por la rapidez de las respuestas.

sep,gracias se que no sea muy ...ético, de paso decir que hay que tener en cuenta los nuevos... html5 y css3, que se están implementando, y muchos aun no actualizan sus navegadores... la verdad que será un gustazo, el poder ir implementando los tamaños de imágenes, y background. pero... creo que de momento a veces se necesitarán aún soluciones sencillas.

Una cosa no quita la otra.