CSS를 사용하여 반응 형 디자인 이미지를 추가하는 방법은 다음과 같습니다.
오늘날 인기있는 웹 사이트를 살펴보면 볼 수있는 한 가지 디자인 처리법은 대형 스크린 스패닝 배경 이미지입니다. 이러한 이미지를 추가하는 데 따르는 어려움 중 하나는 웹 사이트가 다양한 화면 크기 및 장치에 응답해야하는 모범 사례에서 비롯됩니다. 즉, 반응 형 웹 디자인 이라고하는 방법입니다.
웹 사이트의 레이아웃이 다른 화면 크기로 변경되고 크기가 조정되므로 이러한 배경 이미지도 크기에 맞게 크기를 조정해야합니다.
실제로 이러한 "유체 이미지"는 반응 형 웹 사이트의 핵심 요소 중 하나입니다 (유체 그리드 및 미디어 쿼리 포함). 이 세 부분은 처음부터 응답 성있는 웹 디자인의 필수 요소 였지만 응답 형 인라인 이미지를 사이트 (인라인 이미지는 HTML 마크 업의 일부로 코딩 된 그래픽)에 추가하는 것이 매우 쉬운 반면, 배경 이미지 (CSS 배경 속성을 사용하여 페이지에 스타일이 지정됨)는 많은 웹 디자이너와 프런트 엔드 개발자에게 오랫동안 중요한 도전 과제였습니다. 고맙게도 CSS에 "background-size"속성을 추가함으로써이를 가능하게 만들었습니다.
별도의 기사 에서 CSS3 속성 background-size를 사용하여 창에 맞게 이미지를 늘리는 방법에 대해 다루었지만이 속성을 배포하는 데 훨씬 더 유용하고 유용한 방법이 있습니다. 이렇게하려면 다음 속성 및 값 조합을 사용합니다.
background-size : 표지;
cover 키워드 속성은 브라우저가 창 크기에 관계없이 창에 맞게 이미지의 크기를 조정하도록 브라우저에 지시합니다. 이미지는 전체 화면을 커버하도록 비율이 조정되지만 원본 비율과 종횡비 는 그대로 유지되어 이미지 자체가 왜곡되지 않도록합니다.
이미지는 전체 윈도우 표면을 덮을 수 있도록 가능한 한 크게 창에 배치됩니다. 즉, 페이지에 빈 곳이나 이미지의 왜곡이 생기지는 않지만 화면의 가로 세로 비율과 문제의 이미지에 따라 이미지의 일부가 다듬질 수도 있습니다. 예를 들어 배경 위치 속성에 사용하는 값에 따라 이미지의 가장자리 (위, 아래, 왼쪽 또는 오른쪽)가 이미지에서 잘릴 수 있습니다. 배경을 "왼쪽 상단"으로 설정하면 이미지의 초과 부분이 아래쪽과 오른쪽에서 벗어납니다. 배경 이미지를 중앙에 배치하면 초과 된 부분이 모든면에서 벗어나지 만 과도한 부분이 퍼지기 때문에 어느 한면의 영향이 줄어 듭니다.
background-size 사용법 : 표지;
배경 이미지를 만들 때 상당히 큰 이미지를 만드는 것이 좋습니다. 브라우저는 시각적 품질에 눈에 띄는 영향을주지 않고 이미지를 작게 만들 수 있지만 브라우저가 이미지를 원래 크기보다 큰 크기로 확대하면 시각적 품질이 저하되어 흐릿하고 픽셀 화됩니다. 단점은 거대한 이미지를 모든 화면에 전달할 때 페이지에 성능이 저하된다는 것입니다.
이렇게 할 때 다운로드 속도와 웹 전송을 위해 해당 이미지 를 올바르게 준비 해야합니다. 결국 충분한 크기의 이미지와 품질 사이에서 행복한 매체를 찾고 다운로드 속도에 적합한 파일 크기를 찾아야합니다.
크기 조정 배경 이미지를 사용하는 일반적인 방법 중 하나는 이미지가 페이지의 전체 배경을 차지하게하고, 그 페이지가 넓고 데스크톱 컴퓨터에서 보거나 작아서 핸드 헬드 모바일로 전송되는지 여부입니다 장치.
이미지를 웹 호스트에 업로드하고 CSS에 배경 이미지로 추가하십시오.
background-image : url (fireworks-over-wdw.jpg);
background-repeat : no-repeat;
배경 위치 : center center;
배경 부착 : 고정;
CSS 프리픽스 앞에 CSS 추가 :
-webkit-background-size : 표지;
-moz-background-size : 표지;
-o-background-size : 표지;
그런 다음 CSS 속성을 추가하십시오.
background-size : 표지;
다양한 장치에 적합한 다양한 이미지 사용
데스크톱 또는 랩탑 환경에 대한 반응 형 디자인이 중요하지만 웹에 액세스 할 수있는 다양한 장치가 크게 늘어 났으며 다양한 화면 크기가 제공됩니다.
앞서 언급했듯이, 예를 들어 스마트 폰에 대단히 반응이 빠른 배경 이미지를로드하는 것은 효율적이거나 대역폭을 고려한 디자인이 아닙니다.
미디어 쿼리 를 사용하여 디스플레이 할 장치에 적합한 이미지를 제공하고 모바일 장치와의 웹 사이트 호환성을 향상시키는 방법에 대해 알아보십시오.
Jennfier Krynin의 원본 기사. 제레미 지라드 편집일 9/12/17