高度等于宽度响应调整大小javascript

Question

在这个剧本中，我想把我的身高调到我的宽度。如果缩小浏览器然后刷新浏览器，则此方法有效。但是现在我希望他在我不必刷新时调整浏览器大小时就这样做了。试图调整窗口大小，但它没有用，也许我用错了。

<script type="text/javascript">
    var height = $('.circle img').width();
    $('.circle img').css({ 'height': height + 'px' });
</script>

Answer 1

使用jQuery resize()

附加resize事件处理程序

$(window).resize(function(){
   var height = $('.circle img').width();
   $('.circle img').css({'height':height+'px'});
});

Answer 2

您是否尝试过使用 vw （viewport width）代替 px 来确定宽度？ 如果您的网站设计成为可能，您可以使用纯CSS代替Javascript来保持宽高比保持一致。

它有点像这样：

.circle img {
   width: 10vw;
   height: 10vw;
}