CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4964986
user4964986

Reputation:

height equal width responsive on resize javascript

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>

Upvotes: 1

Views: 1817

Answers (2)

sailor sausage
sailor sausage

Reputation: 45

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;
}

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30587

Attach a resize event handler with jQuery resize()

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

Upvotes: 6

Related Questions