트위터 부트 스트랩의 Pinterest 스플래시 페이지

체크 아웃 Pinterest's splash page - ** (계정에서 로그 아웃했거나 스플래시 페이지가 보이지 않는지 확인하십시오.) 하단의 Macbook 이미지는 응답 성이 좋으며 축소 및 확장됩니다. 브라우저 윈도우의 크기트위터 부트 스트랩의 Pinterest 스플래시 페이지

바보 같은 질문 ... 어떻게 처리합니까? Twitter Bootstrap을 사용하여 어떻게 이것을 할 수 있습니까?

출처

2013-04-18 zoops

이 질문은 있습니까? http://stackoverflow.com/a/15641047/1004046 – Pigueiras

@Pigueiras 아니요. 하단에 Macbook 전문가의 이미지가있는 메인 방문 페이지에 대해 이야기하고 있습니다. Pinterest 계정이나 연결된 계정 (페이스 북)에서 로그 아웃해야 볼 수 있습니다. – zoops

@espooz jspz가 가능한 jquery에 의해 수행됩니다. 크롬을 사용하면 높이를 변경하면서 이미지의 스타일 요소 변경을 볼 수 있습니다. 내 생각에 jquery가 화면 변경을 청취하여 그에 따라 크기를 업데이트합니다. – AbstractChaos

페이지의 <script> 블록을 보면 어떻게 완료되었는지 확인할 수 있습니다. 기본적으로 리사이즈 리스너입니다. 당신이 CSS에 하나의 차원의 크기를 할 때 <img>의 자동 비례 적으로 크기를 조정하기 때문에,

var htAboveImage = $content.height(), 
    naturalImageHt = 450, 
    padding = 150, 
    minImageHt = 100; 

var changeFunc = function() { 
    var windowHt = $window.height(); 
    var imageHt = Math.min(
         Math.max(windowHt - htAboveImage - padding, minImageHt) 
         naturalImageHt, 
       ); 
    $image.height(imageHt); 
}; 
changeFunc(); 
$(window).on("resize", changeFunc);

너무 폭을 업데이트 할 필요가 없습니다 : 여기에 단순화 된 버전입니다. 그러나 Pinterest의 전체 코드는 이미지 위에있는 내용의 패딩을 업데이트하여 수직으로 중앙에 유지합니다.

By 덧붙여 : Chrome 개발자 도구는 다음과 같은 질문에 대해서는 친구입니다! 이러한 도구의 신중한 사용을 제작, 그것은 무슨 일이 일어나고 있는지 볼 수 분 밖에 소요 :

마우스 오른쪽 단추로 클릭 한 이미지를> 요소
창 크기를 조정을 점검하고 PX에서 명시 적으로 높이가 설정되어있을 것을 알 수 태그를 계속 업데이트합니다. JS가해야합니다. 그러나 누가 그것을 설정하고 있습니까?
마우스 오른쪽 단추로 클릭하고 태그>에 브레이크 ...> 다시 수정
크기 조정 창을 속성과 CSS 속성을 설정하는 축소 된 jQuery 코드에 묻혀 – 아마 일반적인 코드를 호출 스택의 중단 점
최고를 기록했다. 스택에서 비 jQuery 코드 중 가장 높은 부분은 무엇입니까?
코드가 있습니다!

출처

2013-04-24 18:51:23 peterflynn

트위터 부트 스트랩의 Pinterest 스플래시 페이지

답변

관련 문제