미디어 쿼리 및 높이 문제에 대한 CSS

다른 장치에 표시하고 싶은 div에 대한 이미지 배경이 있습니다. 문제는 올바르게 맞추기 위해 이미지 높이를 줄 필요가 있다는 것입니다. 이제 다른 전화기에서 높이를 다른 픽셀로 조정해야합니다. forexample on iphones 65px는 세로 모드에서 작동하지만 가로 모드에서는 작동하지 않습니다. div가 백그라운드 이미지의 100 %를 덮기 위해 높이가 조절되는 방식이 있습니까? 여기미디어 쿼리 및 높이 문제에 대한 CSS

<style> 
    div.testing { 
     height: 95px; 
     background-image: url(/myimageurl); 
     background-repeat: no-repeat; 
     background-size: 100%; 
    } 
    @media screen and (max-width: 320px) { 
     /* iphone portrait */ 
     div.testing { 
      height: 65px; 
     } 
    } 
    @media screen and (min-width: 321px) and (max-width: 480px) { 
     /* iphone portrait */ 
     div.testing { 
      height: 80px; 
     } 
    } 
    </style> 

    <div class="testing">&nbsp;</div>

출처

2013-06-01 Autolycus

background-size : 표지를 사용하면 너비가 문제가됩니다. – Autolycus

100 %로 높이를 설정 : 커버;

.thing { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

왜 배경 이미지를 사용하고 있습니까? 정기적 이미지를 사용할 수 있습니다, 당신은 이런 식으로 그것을 할 수 : ALSO

.thing { 
    width: 100%; 
    max-width: [your biggest width]; 
} 

.thing img { 
    display: inline-block; 
    width: 100%; 
    height: auto; 
}

내가 최대 폭에 당신의 사고 방식을 틀지 추천 최소 폭을 사용하고 받고, 첫째 작은 화면을 시작할 것 더 커.

그리고 당신이 정말로 div.testing 필요하지 않습니다 -

- 당신이 좋은 이유에 대한 배경 이미지를 사용하는 경우 그냥

을 .testing 할 수 있습니다 ... 당신은 DIV을 조사해야

.thing { 
    height: 0; 
    padding-bottom: 30%; /* play with this */ 
}

이렇게하면 비율이 유지되지만 특정 경우에만 유용합니다.

실제 이미지가 포함 된 완전한 정보가 유용 할 것입니다.

행운을 빈다.

출처

2013-06-01 22:43:30 nouveau

둥지 내 코드 배경 DIV 안에 당신의 사업부이며, 당신은 배경 크기를 사용할 수

출처

2013-06-01 22:34:42 kushyar

미디어 쿼리 및 높이 문제에 대한 CSS

답변

관련 문제