使用css单位：

Question

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

像这个网站滑块“http://sabanet.ir” 当您更改窗口大小时，滑块保持高度与宽度的比率...

我应该使用javascript来执行此操作，还是可以使用css或bootstrap执行此操作？

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

Answer 1

如果您不希望支持旧版IE，则可以通过@media查询执行此操作。

定义视口的最小和最大宽度/高度，并根据断点指定高度属性。

示例是：

@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 */
}
}

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

Answer 2

为此你可以使用Bootstrap网格系统。

例如：

＆＃13;

<div class="row">
  <div class="col-md-3">
    This is text 1
    </div>
  <div class="col-md-3">
    This is text 2
    </div>
  <div class="col-md-3">
    This is text 3 
    </div>
  <div class="col-md-3">
    This is text 4
    </div>
  </div>

＆＃13;

包括bootstrap CSS（您可以下载并提供本地路径，或者您也可以提供 cdn 路径）。

现在我所做的就是。

我选择了一个bootstrap 行，并将其分为4个相同的宽度和高度列。所以无论你在相应的列中写什么，都会被默认的列宽包围。

并且在列类div 中，当您放置自定义div时，它将根据浏览器窗口的大小进行响应。

Answer 3

在搜索并思考之后，我想有一些方法可以做到这一点

使用css单位：

我们可以使用相对大小的css单位
em：相对于元素的字体大小（2em表示当前字体大小的2倍）
ex：相对于当前字体的x高度（很少使用）
ch：相对于＆＃34; 0＆＃34;的宽度（零）
rem：相对于根元素的font-size
vw：相对于视口宽度的1％*

我们可以使用vw单位设置div元素的高度，如下所示

.responsive-banner {
    height: 30vw;
}

使用jquery：

首先我们将最喜欢的比率设置为变量，然后将元素的高度更改为宽度

var ratio = 700/1920;
$(document).ready(function() {
  $('.responsive-banner').height(ratio * $('.responsive-banner').width());
});

$(window).resize(function() {
  $('.responsive-banner').height(ratio * $('.responsive-banner').width());
})

为横幅

3 个答案:

使用css单位：

使用jquery：