需要帮助从浏览器宽度获取引导div的高度

Question

我正在开发一个带有bootstrap 3的HTMl页面。我使用下面的代码来显示翻转图像。在智能手机屏幕上，我想保持id卡-1的高度与窗口的宽度相同。

<div class="col-md-3 col-sm-6 col-xs-12">
    <div class="card" id="card-1"> 
        <div class="front"> 
            <img src="img/p1.jpg" alt="Portfolio Images" class="img-responsive">
        </div> 
        <div class="back">
            <img src="img/hover.png" alt="Portfolio Images" class="img-responsive">
        </div> 
    </div>
</div>

我该怎么办？

Answer 1

请参阅此JSFIDDLE

您可以使用$(window).width();

获取窗口的宽度

$(document).ready(function(){
    var w = $(window).width();
    $('#card-1').height(w);
});

您可以使用onchange等更新它。但我不认为这是必要的。