배경 이미지를 반응적으로 만드는 방법

Question

나는 UI 개발을 처음 접했고 최근에 학습을 시작했다고 인정합니다. 나는 InuitLabs.com과 비슷한 웹 사이트를 개발 중이다. 뷰 소스를 사용하여 소스 코드를 살펴보면 완전히 잃어 버렸습니다. 특히 나는 알고 싶어합니다.

1. 홈페이지의 슬라이더 이미지가 반응하는 방식은 무엇입니까? 그것은 자바 스크립트를 통해 또는 순수 CSS를 사용하고 있습니다.
2. 또한 배경 이미지를 그대로 남겨두고 스크롤하는 경우 위쪽으로 텍스트가 이동한다는 것을 알고 싶습니까? 동일한 효과를 얻는 방법.

저는 이것이 기본적인 질문 일 수 있지만 많은 자바 스크립트와 CSS 파일이 있기 때문에 소스 코드를 통해 알기가 어렵다는 것을 알았습니다.

감사합니다, 프라 딥

당신은 당신이 예를 들어 CSS를 통해 %에서 원하는 %로 이미지를 설정

Answer 1

background-size 속성을 살펴보십시오. 당신은 어떤 픽셀 또는 % 값으로 배경 크기를 설정하거나 상수를 사용할 수 있습니다 커버를가장 가능성이 그것을 자르기 떠나지 않고 용기 내부의 이미지에 맞게 시도를 포함하면서 전체 컨테이너를 채우기 위해 이미지 크기를 조정합니다 어떤 배경없이 컨테이너의 일부입니다.

원하는 것은 배경 크기 속성을 덮어서 설정하는 것입니다.

Answer 2

:

.slider img { 
    width:100%; 
} 

편집 : 또한 당신이 경우, 자동으로 높이를 지정해야 이미지 비율을 잃고 싶지 않아요. 너비와 높이를 100 %로 설정하면 이미지 비율이 엉망이됩니다.

Answer 3

더 긴 장치에도 응답 높이를 설정하려면 너비를 100 %로 설정하십시오. 높이 : 100 %; 다른 현명한 사용 높이 : 자동; div를 만들고 그것에 대한 배경 크기 속성을 유지하십시오.