CSS媒體查詢寬度或高度

Question

我在全屏頁面的中央放置了一個徽標。

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

一切正常。 現在，我想在不同的設備高度和寬度上使用不同的大小，因此我嘗試使用媒體查詢。

@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;
    }
}

但是，如果兩個參數同時更改，這仍然有效。 我希望將其分開，因此您可以更改瀏覽器高度和圖像大小，或者更改瀏覽器寬度，或同時更改兩者。

圖像（徽標）應始終位於頁面中間。

Answer 1

如果以這種方式將圖像居中放置在父圖像中，則不需要所有這些邊距偏移量：

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

然后，您可以使用媒體查詢來僅更改圖像大小：

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

我做了一個JSFiddle示例