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

Question

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

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

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

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

我尝试过 flex 滑块，但我认为触摸功能在 windows phone 上运行得不是很好

这可以用 CSS 解决吗？

丹尼尔

score 0 · Accepted Answer

是的，您可以使用填充顶部。

例如。您的横幅为 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%;
    }

这篇文章给出了一个深入的例子

1 回答 1