javascript - 使用 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方法的回调中设置元素的高度(.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