0

I have resize image function according to the container, but if I resize the browser window the else statement is working earlier on 784xp. When I resize in resposive mode from the Device Toolbar ( Ctrl + SHIFT + M ) is ok. Is that normal or if not what to change in my function ? The other problem is that <768px the else is not working before refresh.

$(document).ready(resizeImg);
$(window).resize(resizeImg);

    function resizeImg(){
        var img = $('.box-image');
        var box = $('.box');
        var boxHeight = $(box).innerHeight();
        if ($(window).width() > 767) {
            $(img).height(boxHeight)
        }
        else {
            $(img).css({ 'height' : 'auto' });
        }
    }
jOE
  • 64
  • 8
  • 1
    `$('.className')` selectors return a jQuery Objects Array. How can you get the `.innerHeight()` of an Array? – StackSlave Jan 19 '18 at 08:43
  • I think you need to reload for every view then you can see the changes otherwise if you directly resize window then you can't see the changes. So you need to reload in every view. Thanks !! – Abhijeet Jan 19 '18 at 08:44
  • so how to get the height of the container if that is not ok ? – jOE Jan 19 '18 at 08:49
  • `$(box).innerHeight();` should be something like `box.eq(0).innerHeight();`. – StackSlave Jan 19 '18 at 08:52
  • This question lacks knowledge about jQuery and jQuery objects, as the comments above show. Please read more into the jQuery documentation to get a better understanding of what's going on. – Bram Vanroy Jan 19 '18 at 09:46
  • The issue you are describing is a duplicate. jQuery does not include the scrollbar (~17px) when getting the width and behaves differently than media queries. Instead you may want to look at [`matchMedia()`](https://developer.mozilla.org/nl/docs/Web/API/Window/matchMedia) which should behave identical to CSS. – Bram Vanroy Jan 19 '18 at 09:51

1 Answers1

0

If i have understand correctly you need to add a function that detects live the window change you could try this

$(window).resize(function() {
resizeImg();
});

I hope this works for you

Alexander
  • 161
  • 8