height equal width responsive on resize 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>

Make sure you included the jquery library on your top of head tag and your code be inside the document.ready function() — Sudharsan S, Jun 02 '15 at 11:34
Can you show the html for circle and img? There may be an easy pure css solution — AmmarCSE, Jun 02 '15 at 11:48
for a CSS solution, you can see here http://stackoverflow.com/questions/1495407/css-maintain-div-aspect-ratio — web-tiki, Jun 02 '15 at 11:59

score 6 · Accepted Answer · answered Jun 02 '15 at 11:33

6

Attach a resize event handler with jQuery resize()

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

answered Jun 02 '15 at 11:33

AmmarCSE

30,079
5
45
53

@StefanieSmet, are there any errors? Check the console – AmmarCSE Jun 02 '15 at 11:54
@StefanieSmet, can you reproduce it in a fiddle? – AmmarCSE Jun 02 '15 at 12:00
Only this: Using getPreventDefault () is no longer supported. Instead of that use defaultPrevented. But I don't think it has something to do with this?! – Jun 02 '15 at 12:08
@StefanieSmet, it may depending on sequence of events in your page – AmmarCSE Jun 02 '15 at 12:12
i think this is the fiddle but you don't see the image https://jsfiddle.net/t9407879/1/ – Jun 02 '15 at 12:18

score 1 · Answer 2 · answered Jun 02 '15 at 13:14

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

height equal width responsive on resize javascript

2 Answers2