jquery - 响应式标题/幻灯片没有响应 - 可能是由幻灯片引起的

Question

我有一个带有幻灯片的标题。

参见 fiddle :http://jsfiddle.net/PVbEK/1/

我希望 header (.swiper-container) 在高度和宽度上都能响应。现在，在放大或缩小时高度保持不变，但内容是响应式的。

我希望高度按比例缩放，就像内容一样。

我认为是幻灯片放映导致了这个问题，但我看不出错误在哪里？

我正在使用 Swiper 幻灯片:http://www.idangero.us/sliders/swiper/api.php

我尝试过 flex slider，但我认为触摸功能在 Windows Phone 上运行得不是很好

这可以用 CSS 解决吗？

丹尼尔

Answer 1

是的，你可以使用 padding top。

例如。您的横幅是 1000 像素 x 400 像素

所以高度为 400/1000*100 = 40%

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

假设横幅为 800 像素 x 350 像素

所以这个高度就是 350/800*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