배경 위치, 세 번째 이미지 규칙 및 모바일 디자인

Question

나는 이미지의 초점에 1/3의 규칙으로 정렬 된 이미지로 작업하고 페이지에 이미지를 넣으려면 background-image을 사용합니다.

사용자가 태블릿 (또는 그보다 큰) 기기를 사용하는 경우 background-position:50%;을 사용하고 있습니다. 나는 그림이 옆으로 정렬 되어도 상관 없다.

그러나 휴대 기기에서는 제목 (예 : 내 JSBin 참조)이 화면 중앙에 수평으로 표시되도록하고 싶습니다. 나는 다른 백분율을 사용할 수 있다는 것을 알고 있습니다. 예를 들어, background-position:75% 50%을 사용하면 가까워 지지만, 장치의 너비가 변하면 더 이상 "중심"이 아닙니다.

백의 미디어 쿼리를 작성하지 않고도 언제나 중심에 두도록 할 수있는 방법이 있습니까? background-position은 모바일에서 항상 이미지의 중심에있을만큼 충분히 동적입니까?

여기 내가보고있는 것의 JSBin입니다.

일부 가정 :

• 사진은 항상
• 사진은 항상 동일한 물리적 차원을해야합니다 규칙의 분에 정렬됩니다
수직 정렬에 대한 +
• 걱정하지 IE9에서
• 일

Answer 1

768px보다 작은 경우 시도 :

background-position: -50vw; 

그리고이 경우 표지 대신 배경 크기를 150 %로 설정해야 할 수 있습니다.