Question

我有这个标题，里面有幻灯片。

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

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

我认为幻灯片显示导致此问题，但我看不出错误在哪里？

我尝试过flex滑块，但我认为触控功能在Windows手机上效果不佳

可以用CSS修复吗？

丹尼尔

Answer 1

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

EG。你的横幅是1000像素×400像素

因此高度为400/1000 * 100 = 40％

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

让我们说横幅是800px乘350px

所以这个高度将是350/800 * 100 = 43.75％

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

本文给出了一个深入的例子