jquery - 为横幅创建响应式 div

Question

如何在 bootstrap 中创建像 img-responsive 类一样的响应式 div 但对于 div
当窗口大小改变时，div 元素的高度与其宽度相关。

喜欢这个网站 slider “http://sabanet.ir” 当您更改窗口大小时， slider 会保持高宽比...

我应该使用 javascript 还是可以使用 css 或 bootstrap？

    <div class="responsive-banner">
        <!-- height/width === k -->
    </div>

Answer 1

如果您不想支持旧版 IE，您可以通过 @media 查询来实现。

定义视口(viewport)的最小和最大宽度/高度，并根据断点分配高度属性。

例子是:

@media only screen
and (min-width: 320px) /* Define any min width that you deem appropriate */
and (max-width: 480px){ /* Define any max width that you deem appropriate */
.responsive-banner{
     height:200px /* Enter any value that you deem appropriate */
}
}

您可以使用上述多个查询来定义不同的断点或范围。