너비 또는 높이에 대한 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

당신이 부모에서이 방법으로 이미지의 중심을 경우 당신은 모든 마진 오프셋을 필요가 없습니다

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

:

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

는 그런 다음 단지 이미지 크기를 변경하는 미디어 쿼리를 사용 할 수 있습니다

난 당신을 감사합니다, 그러나 이것은 단지 관련 이미지를 변경하는 JSFiddle example