CSS media queries for width or height

Question

I placed a logo in the center of a full-screen-page.

img.logo {
        width: 920px;
        height: 552px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -460px;
        margin-top: -276px;
    }

This is working fine. Now i want different sizes on different device heights and widths so i tried using media queries.

@media (max-width: 991px), (max-height: 460px) {
    img.logo {
        width: 235px;
        height: 141px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -117px;
        margin-top: -70px;
    }   
}
@media (min-width: 992px) and (max-width: 1199px), (min-height: 300px) and (max-height: 649px) {
    img.logo {
        width: 533px;
        height: 320px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -276px;
        margin-top: -160px;
    }   
}
@media (min-width: 1200px), (min-height: 650px) { 
    img.logo {
        width: 920px;
        height: 552px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -460px;
        margin-top: -276px;
    }
}

But this still works if both parameters are changing at the same time. I want it separated, so you can change the browser height and the image size changes OR the browser width OR both.

The image (the logo) should always stay in the middle of the page.

Answer 1

You don't need all those margin offsets if you centre the image in its parent this way:

img.logo {
   width: 350px; //or whatever
   height: 350px; //or whatever (maybe auto)
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin:auto;
}

Then you can use media queries to change just the image size:

@media (max-width: 400px) {
    img.logo {
        width: 150px;
        height: 150px;
    }   
}

I made a JSFiddle example