위치 함량 상대적인 :

Question

난 다음 요구

• 오른쪽에서 왼쪽 화상 및 콘텐츠와 레이아웃을 고정.

• 이미지는 바닥에 고정된다

• 화상 뷰포트의 100 % 신장에 사용자가 스크롤 크기를 조절할 때 맥스까지

• 화상이 움직이지 않는 뷰포트의 좌측 신장. (이미지가 실제 크기보다 커지려고 시도 할 때 이미지가 왜곡되지 않도록해야합니다.)

• 이미지의 가로 세로 비율은 유지되고 크기 조정 높이에 따라 너비가 조정됩니다.

• 콘텐츠는 이미지의 오른쪽부터 시작하여 이미지가 브라우저 뷰포트로 크기가 조정될 때 이동합니다.

이제는 이러한 요구 사항 중 마지막 부분 만 남겨 두었습니다.

여기 보라 :

http://letteringmusic.com/

는 이미지가 아주 잘 크기를 조정합니다,하지만 난 이미지가 위치하기 때문에 이미지 옆 떠 내용을 얻을 수의 부족 때문에 고정하고, 문서 흐름.

내가 원하는 결과를 얻는 유일한 방법 인 경우 자바 스크립트 솔루션에 반대하지 않습니다.

아무도 내가이 작업을 수행하기 위해해야 ​​할 일을 알고 있습니까?

감사합니다.

Answer 1

브라우저 창 크기를 조정할 때 (window.onresize 이벤트 사용) 콘텐츠를 쉽게 재 설계하는 것이 해결책입니다. 이 함수에서는 배경 이미지의 폭을 읽어야 할 사람 :

var bgWidth = getElementById('background-img').style.width; 
getElementById('content').style.left = bgWidth; 

및 #content { position: absolute }를 사용합니다. 나는 이것이 다른 문제를 소개한다는 것을 알고 있지만, 당신이 그들을 무시할 수 있다고 생각합니다. Javascript가 활성화되어 있어야하며 (누군가이 창 크기를 조정할 때 이벤트가 많이 발생하므로) 가장 좋은 해결책은 아니지만 작동해야합니다.