반응 형 헤더/슬라이드 쇼가 반응이 없습니다 - 아마도 슬라이드 쇼로 인해 발생했습니다

Question

슬라이드 쇼가있는이 헤더가 있습니다. 내가 헤더 (.swiper-container가) 폭과 같은 높이 반응 싶습니다 http://jsfiddle.net/PVbEK/1/

:

는 바이올린을 참조하십시오. 지금은 높이를 올리거나 내렸을 때 높이가 동일하게 유지되지만 내용은 반응 적입니다.

콘텐츠와 같이 높이가 비례 적으로 조정되기를 바랍니다.

슬라이드 쇼가이 문제의 원인이라고 생각하지만 어디에서 오류가 발생하는지 알 수 없습니까?

은 내가 Swiper 슬라이드 쇼 사용하고 있습니다 : 내가 플렉스 슬라이더를 시도 http://www.idangero.us/sliders/swiper/api.php

을,하지만 난이 CSS를 고정 할 수있는 Windows 전화

에 그 잘 작동 터치 기능을 생각하지 않아?

다니엘

Answer 1

예 패딩 탑을 사용할 수 있습니다.

예 : 귀하의 배너 그래서 높이/1000 400 * 100 = 40 %

#banner{ 
    max-width:1000px; 
    width:100%; 
    padding-top:40%; 
} 

그래서이 높이가 800분의 350 일 것의이 배너는 350px

에 의해 800 픽셀을했다 생각한 것 400 픽셀

에 의해 1000px입니다 * 100 = 43.75 %가

#banner{ 
     max-width:800px; 
     width:100%; 
     padding-top:43.75%; 
    } 

이 문서 깊이 예에서 제공

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios