高度等于宽度，响应于调整javascript

Question

In this script I want to put my height as big as my width. This works if you shrink your browser and then refresh your browser. But now I want him to do it when I resize the browser without having to refresh. Have tried to resize window but it didn't worked, perhaps i used it wrong.

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

Answer 1

Attach a resize event handler with jQuery resize()

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

Answer 2

Have you tried using vw ( viewport width ) instead of px to determine your width instead? If it's possible for the design of your site, you can use pure CSS instead of Javascript to keep the aspect ratio consistent.

It goes a little something like this:

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