使用 JavaScript 使高度与动态宽度相同不起作用

Question

我在我的项目中使用 Bootstrap 并尝试从 Bootstrap col 制作一个正方形，但它不起作用，并且它的宽度大小和高度大小总是不同的差距，例如 94.11px 和 94px。

我想让比例为 1:1 宽度：高度。但没用

HTML

<div class="content_image col-xs-3 squarethis"></div>
<div class="content_description col-xs-9 followheight"></div>

JavaScript

var st = $('.squarethis').width();
$('.squarethis').css({'height':st+'px'});
$('.followheight').css({'height':st+'px'});

有人知道吗？

var st = $('.squarethis').width();
$('.squarethis').css({'height':st+'px'});
$('.followheight').css({'height':st+'px'});

.squarethis{
width:30%;
  float:left;
background:#ccc;}
.followheight{
width:70%;
  float:left;
background:#999;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="squarethis">asd</div>
<div class="followheight">asd</div>

下图

the gap between width and height from this code

Answer 1

在.css方法的回调中设置元素的height(.css( propertyName, function ))

更新： 经过几次测试，我可以确定，当 width 被分配给元素时，我们也会在页面上看到滚动条，这会导致变化在元素的width 中，正如我们在% 中分配它一样，设置overflow : hidden 会给你预期的结果！

$('.squarethis').css({
  'height': function() {
    return $(this).width()
  }
}).text(function() {
  return $(this).width() + ' x ' + $(this).height();
});
$('.followheight').css({
  'height': function() {
    return $(this).width()
  }
}).text(function() {
  return $(this).width() + ' x ' + $(this).height();
});

* {
  padding: 0;
  margin: 0;
}
body {
  overflow: hidden;
}
.squarethis {
  width: 30%;
  float: left;
  background: #ccc;
}
.followheight {
  width: 70%;
  float: left;
  background: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="squarethis">asd</div>
<div class="followheight">asd</div>

Fiddle Demo