logo responsive

[danis8]

Hola!

Tengo un problema con el logo de una web. En un primer momento tenia un tamaño del logo de 500px y con este codigo no habia problema para verlo correcto en todos los tamaños de pantalla:

.blog-logo img {
display: block;
max-height: 200px;
max-width: 100%;
height: auto;
width: auto;
}

Pero ahora quiero usar el mismo logo a un tamaño mayor ya que en algunas pantallas de alta resolución si que noto que se ve un poco borroso, asi que ahora lo que quiero es que siga apareciendo a 500px en la web pero usando una imagen mucho mayor:

.blog-logo img {
display: block;
max-height: 200px;
max-width: 500px;
height: auto;
width: auto;
}

Me funciona bien, pero se queda fijo en los 500px en todos los tamaños, no se reduce proporcionalmente.

Podría especificar en @media de cada tamaño pero me gustaría ver alguna alternativa más simple que eso

E