반응이 빠른 배경 - 홈 페이지의 높이가 100 %이지만 이미지가 모바일 크기로 표시되지 않습니다.

Question

#home 
    height: 100% 
    width: 100% 
    background-image: url("/lib/img/home.jpg") 
    background-position: center center 
    background-repeat: no-repeat 
    background-attachment: fixed 
    background-size: cover 

내 CSS에 대해 SASS를 사용하고 있습니다.

문제는 내 방문 페이지가 전체 화면 크기가되고 반응이 좋기를 바라지 만 풀 스크린에서 잘 작동하는 가로 이미지가 있지만 모바일 크기에서는 높이가 전체 화면에 맞지 않습니다. 이것에 대한 더 나은 해결책이 있습니까?

Answer 1

img_background { 
     max-width: 2000px; // maximum width for the backgound pic 
     min-width: 100px; // for mobile phones in portrait view 
     position: absolute; 
    } 

이 코드는 반응 할 것이다, 그래서 당신은 PC에서 브라우저 창 크기를 조정할 때, 당신의 브라우저의 너비에 이미지 크기를 조정합니다. 휴대 기기에서는 전체 이미지가 표시됩니다.

이 도움이 되었기를 바랍니다.

(편집 :이 CSS이다)

Answer 2

당신이 반응하여 요소를 수행하기위한 부트 스트랩을 사용할 수 있습니다. 이렇게하면 요소 크기가 해상도 화면과 함께 변경됩니다.

반응 형 고정 폭 컨테이너의 경우 .container를 사용하십시오.

<div class = "container"> 
    ... 
</div> 

또는 :

<div class = "container-fluid"> 
    ... 
</div> 

또는 :

<div class = "container"> 
    ... 
</div> 

또는 :

<img class="img-responsive" src="your_image.jpg"> 

가 부트 스트랩을 사용하여 더 많은 솔루션이 있지만 기본적인 사람이이다.

확인 자세한 내용은이 링크 :

Bootstrap

Answer 3

#home{ 
    height: 100vh; 
    width: 100%; 
    float: left; 
    background-image: url("/lib/img/home.jpg"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    /*Note background attachment fixed not work in mobiles accurately like ios and also on ipads... 
    USe background attachment scroll for the same...*/ 
    background-size: cover; 
}