반응 형 "자체 자르기"배경 이미지를 만드는 방법은 무엇입니까?

Question

저는 WordPress 테마를 개발 중이며 조금 문제가 있습니다. 내 홈페이지에서 나는 가운데에 몇 개의 텍스트가있는 넓은 배경 이미지를 원합니다. 지금까지 꽤 표준. 문제는 높이를 동일하게 유지하고 브라우저가 작아지기를 원할 때 이미지가 양쪽 측면에서 자르기 때문에 이미지가 중앙에 머무르게됩니다. 다음은 위의 예입니다. 크기를 조정하고 상단의 큰 이미지를보십시오. http://www.shopstyle.com/

이 효과는 어떻게 얻을 수 있습니까?

미리 감사드립니다.는 :)

Answer 1

당신은 그 목적을

커버
포함의 반대 인 키워드되었다 값 cover과 재산 background-size를 사용할 수 있습니다. 가능한 한 큰 이미지의 비율을 조정하고 이미지 종횡비를 유지합니다 (이미지가 찌그러지는 것은 아닙니다). 이미지는 컨테이너의 전체 너비 또는 높이를 "덮습니다". 이미지와 컨테이너의 크기가 다른 경우 이미지가 왼쪽/오른쪽 또는 위쪽/아래쪽으로 잘립니다.

당신이 (당신이 FHD, HD, 태블릿, 미디어 쿼리 모바일에 대해 서로 다른 높이를 설정할 수 있습니다) 필요한 높이를 설정하고 필요한 경우 이미지가 (이 높이보다 짧은 만약 사용자가 설정) 측면에서 잘려 확대됩니다

Answer 2

background-size : 표지를 사용하는 것에 덧붙여;

이미지의 높이를 조절하려면보기 포트 높이를 사용해야합니다. 이 방법은 데스크톱, 랩톱, 휴대 전화 등 어느 것이 든 항상 뷰 포트 높이의 특정 비율이됩니다. 높이를 표시하는 데 더 유동적 인 방법입니다.

예 (화면 전체를 덮는)

.yourelement { 
    height: 100vh; 
} 

예 (화면의 절반을 커버)

.yourelement { 
    height: 50vh; 
} 

따라 조정한다.