Código:
<style type="text/css">
.centrar-imagen {
text-align: center;
}
.centrar-imagen img {
width: 100%; /* Siempre que la resolución de pantalla sea inferior que el ancho de la imagen, ocupará el 100% */
max-width: 751px; /* Definimos el ancho máximo; el ancho de la imagen original, para evitar que siga ampliándose cuando la resolución de pantalla sea superior a éste */
height: auto; /* Dejamos que el navegador muestre automáticamente el alto siempre proporcional al ancho de la imagen */
}
html,body{
margin:0px;
height:100%;
}
</style>
</head>
<body>
<div id="contenedor" style="width:100%; height:100%;">
<div class="centrar-imagen"><img src="bilbao5.jpg" /></div> <!-- Quitamos los estilos en línea y dejamos que trabajen los definidos en el style -->
</div>
</body>
Si quieres que en resoluciones inferiores no te ocupe el 100% del ancho de la pantalla, puedes 1) Cambiar el width de la imagen de 100% a 80% por ejemplo o 2) Añadirle padding al contenedor.
Un consejo: Deja de utilizar los estilos en línea. Lo mires por donde lo mires, entorpecen el trabajo.
Un saludo!